React: Input type email bug

[dominicarrojado]

https://codepen.io/anon/pen/GwZeNO

Open this codepen and paste this "[email protected] 1"
Then press backspace, notice that the focus changes to the beginning of the input.

[Xizario]

It happens because the browser trim the spaces from the end of the value. Modify your code as follows to see what happens:

  inputOnChange = ({ target }) => {
    console.log('\'' + target.value + '\'');
    this.setState({ [target.name]: target.value });
  }

Looks already discussed here https://github.com/facebook/react/issues/6368

[deammer]

This means we have to choose between using an uncontrolled input with type="email" _or_ a controlled input with type="text", which isn't great.

My "solution" is to swallow the event if it's a space:

// Controlled email input
<input
  type="email"
  value={this.state.value}
  onChange={this.onChange}
  onKeyPress={this.onKeyPress} />

onKeyPress = syntheticEvent => {
  if (syntheticEvent.charCode === 32) {
    syntheticEvent.preventDefault();
  }
}

onChange = evt => {
  this.setState({ value: evt.target.value });
}

This won't work if a user pastes an email with a space in it, but it's the least terrible bandaid I could come up with 🙈

[oliviertassinari]

A similar issue was reported on Material-UI side. The regression seems to have come between React v16.2.0 and v16.3.0: https://codesandbox.io/s/xrv5w1j90w.

[nataliemarleny]

I've narrowed down to where this problem was introduced - it first appears because of the changes in 4338c8db commit to the file src/renderers/dom/shared/HTMLDOMPropertyConfig.js. If the changes from this commit/file are reverted in any of the commits that come after it, <input type="email"> no longer has this strange behaviour.

As I can see in packages/react-dom/src/shared/DOMProperty.js in the master branch, there aren't any markers to denote that a prop has side-effects anymore, so purely reverting to fix this problem doesn't seem straightforward.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[LucasDachman]

I'm still getting this bug on React 16.12.0

[Avadakedvr]

I'm still getting this bug on React 16.12.0

same here, any fixes?

[josepharhar]

I made a fix in chrome which should fix this problem which should be released in chrome 85, try it out on canary: https://www.google.com/chrome/canary/

[JCC13]

Hi, I'm still seeing this issue on React v16.13.1. Seeing it on Chrome browser. Anyone here observed the same on the latest React version 16.13.1? Someone here has the fix for this issue? Thanks.

[josepharhar]

@JCC13 Did you try it in chrome canary? The fix is not in stable chrome yet.

[josepharhar]

@gaearon I believe this issue is fixed.

• Firefox: I believe this never affected firefox
• Chrome: The fix is now in stable chrome
• Safari: I just landed a fix to webkit

[deammer]

@josepharhar I can confirm that this bug is fixed in Chrome 86 with React 16.13.1.

https://codepen.io/deammer/pen/rNLZzyV