Cannot trigger onAccept with react testing library when testing input created with IMaskMixin

[Brian Busby]

Describe the bug
It appears to not be possible to trigger onAccept for components created via IMaskMixin when using react testing library.

For reference, here is a masked date input I created with IMaskMixin:

export const MaskedDateInput = (props: MaskedDateInputProps) => {
  const { onClear, onAccept, value, isClearable, width, leftIcon, borderStyle, customCss, testId } = props;
  const MaskedInput = IMaskMixin<HTMLInputElement, IMaskInputProps<HTMLInputElement>>(
    ({ inputRef }) => {
      return (
        <Input
          ref={inputRef}
          data-testid={testId}
          type="text"
          size="md"
          width={width}
          borderStyle={borderStyle}
          leftIcon={leftIcon}
          placeholder="MM/DD/YYYY"
          onClear={onClear}
          isClearable={isClearable}
          onKeyDown={e => {
            // inside of filter submenu we need to stop propagation for key presses other than arrows
            // otherwise the text input loses focus since there is a type-ahead search for menu items
            if (!navigationKeys.includes(e.key)) {
              e.stopPropagation();
            }
          }}
          css={
            customCss
              ? css`
                  ${customCss}
                `
              : undefined
          }
        />
      );
    },
  );

  return (
    <MaskedInput
      mask={Date}
      onComplete={onAccept}
      pattern="m{/}`d{/}`Y"
      format={(date: Date | null) => {
        return date ? format(parseISO(date?.toISOString()), 'MM/dd/yyyy') : '';
      }}
      parse={(str: string) => {
        return parse(str, DATE_FNS_DATE_STRING, new Date());
      }}
      placeholder="MM/DD/YYYY"
      value={value}
      onAccept={onAccept}
    />
  );
};

When I target the input component by getting its data-testid and then change its value, the value of the input changes, but the onAccept function doesn't fire. I found that many folks have been able to work around this with the following:

function changeInputMaskValue(element, value = '') {
  element.value = value;
  element.selectionStart = element.selectionEnd = value?.length ?? 0;
  TestUtils.Simulate.change(element);
}

However this solution doesn't seem to work with a component created with IMaskMixin. I think the issue is that we're targeting the inner Input component with the change but the onAccept is on the MaskedInput component, which I'm not sure how to target.

Environment:

• OS: MacOS
• Browser: Chrome
• Version 118.0.5993.117
• IMask version: 7.1.3

[Alexey Kryazhev]

can it simulate input event for inner Input? You can get MaskedInput component by using ref on MaskedInput