show warning when using userevent.type and blur()

[yshwaker]

• @testing-library/user-event version: 12.1.5
• Testing Framework and version: Jest 26.4.2
• DOM Environment: jsdom 16.4.0 through Jest

Relevant code or config

const MyTest = () => {
  const ref = useRef();
  const [a, setA] = useState('');

  function onChange(e) {
    setA(e.target.value);

    if (e.target.value === 'a') {
      ref.current.blur();
    }
  }

  return (
    <div>
      <input ref={ref} value={a} onChange={onChange} data-testid="inputRef" />
    </div>
  );
};

it('test', () => {
    const wrapper = render(<MyTest />);

    userEvent.type(screen.getByTestId('inputRef'), 'a');

    expect(1).toEqual(1);
});

What you did:
run the test

What happened:
the console will show warning message as follows:

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1220) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:1220) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

and if I try catch the async call in typeImpl and expose the error, it show as follows:

TypeError: Cannot read property 'length' of undefined
        at setSelectionRange (/someplace/node_modules/@testing-library/user-event/dist/type.js:243:70)
        at fireInputEventIfNeeded (/someplace/node_modules/@testing-library/user-event/dist/type.js:272:5)
        at typeCharacter (/someplace/node_modules/@testing-library/user-event/dist/type.js:326:26)
        at callback (/someplace/node_modules/@testing-library/user-event/dist/type.js:219:26)
        at /someplace/node_modules/@testing-library/user-event/dist/type.js:144:31
        at typeImpl (/someplace/node_modules/@testing-library/user-event/dist/type.js:159:6)
        at Object.type (/someplace/node_modules/@testing-library/user-event/dist/type.js:73:14)
        at Object.<anonymous> (/someplace/src/client/components/common/date-picker/date-range-picker-input.test.js:248:15)
        at Object.asyncJestTest (/someplace/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
        at /someplace/node_modules/jest-jasmine2/build/queueRunner.js:45:12
        at new Promise (<anonymous>)
        at mapper (/someplace/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
        at /someplace/node_modules/jest-jasmine2/build/queueRunner.js:75:41
        at processTicksAndRejections (internal/process/task_queues.js:93:5)

      at typeImpl (../node_modules/@testing-library/user-event/dist/type.js:161:13)

Problem description:
seems like currentElement is returning document.body element since input component lost its focus. and thus the value of this element is undefined.

Suggested solution:

user-event/src/type.js

Line 234 in 5feaa94

if (typeof value === 'undefined') {
    return;
  }

[ph-fritsche]

That will prevent the error, but won't fix the behavior if the new activeElement is editable.
I think we should only call setSelectionRange if the activeElement did not change.

[yshwaker]

yes, I agree. should probably be something like master...yshwaker:master

[kentcdodds]

That looks pretty good to me, though we should probably forward along the prevElement in every place that fireInputEventIfNeeded is called.

[ph-fritsche]

Resolved in v13.0.0 🚀