userEvent.type not entering a space into inputs with type email

[wolfe111]

• @testing-library/user-event version: 12.1.8

• Testing Framework and version: Jest version 26.6.0
• DOM Environment: jsdom 16.4.0 through jest

Relevant code or config

<input
  id='emailId'
  type='email'
  onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
    console.log(e.target.value)
    setEmailAddress(e.target.value);
    setError(null);
   }}
/>

it('should show an error when an email is typed with a space and submitted', async () => {
  const emailAddress = 'some{space}[email protected]'

  render(<App/>);

  const emailField = screen.getByLabelText('Email');
  await userEvent.type(emailField, emailAddress);
  userEvent.click(screen.getByText('Enter email'));

  await waitFor(() => {
    expect(screen.queryByText('No email errors')).not.toBeInTheDocument()
    expect(screen.queryByText('Email has white space')).toBeInTheDocument()
  })
});

What you did:
I wanted to test a email validation message I had in on one of my forms and had an issue inputting a space into an input box with type=email. When running it in the browser, I'm freely allowed to enter a space.

What happened:
userEvent.type would ignore the space being typed in. See console logs when running in repo below.

Reproduction repository:
https://github.com/wolfe111/user-event-space
(created with create-react-app and updated @testing-library/jest-dom, @testing-library/react and @testing-library/user-event to most recent version)

[marcosvega91]

Hi @wolfe111 thanks for reaching us :).

I think that this is a bug. As for the spec some inputs have sanitization algorithm. The sanitization algorithm for the value of type email will

• remove new lines from the value
• remove trailing and leading spaces

jsdom is following this algorithm
https://github.com/jsdom/jsdom/blob/5279cfda5fe4d52f04b2eb6a801c98d81f9b55da/lib/jsdom/living/helpers/form-controls.js#L214-L223

On our side I think that we should keep the value with the space and use on the next iteration of the type function instead of using the value of the input.

[BentMylund]

Hi, I think that the same problem is present when the input control is of type url: https://github.com/jsdom/jsdom/blob/5279cfda5fe4d52f04b2eb6a801c98d81f9b55da/lib/jsdom/living/helpers/form-controls.js#L266

[ph-fritsche]

This should be solved by adding a special handler for those inputs here.
Maybe the implementation for number input could be extended.
As we can not differ between changes overwritten by an oninput handler and changes overwritten by the DOM implementation we should try to limit this behavior to known cases in jsdom.

[ph-fritsche]

This should be easier to tackle once #744 is resolved.

[ph-fritsche]

Resolved by #747