1

Inputs with type="email" seem to behave differently from Inputs with type="text when it comes to getting it's value.

See http://jsbin.com/lanarureta/edit?html,js,console,output

I am trying to get the value with a space to use it in a controlled form component in React. The value now differs from what is displayed in the state:

<InputField
  value={props.value}
  onChange={(e, value) => props.onFieldChange("email", value)}
  type="email"
/>

This causes the cursor to jump around. (see https://codepen.io/anon/pen/RKQrvr?editors=0010)

My solution would be to get the value with the spaces (nothing stripped away). How am I able to do this when I want to keep the type="email"?

This only seems to happen on Chrome and Safari.

Marc
  • 11
  • 4
  • 1
    Email addresses shouldn't _really_ contain spaces Seems like Firefox and IE do not trim whitespace surrounding the content entered into an `email` input. A request was made to fix this in Firefox but it may have regressed. – Pineda Jan 31 '17 at 10:34
  • Emails don't have spaces. Why just not use other input type? – jbarradas Jan 31 '17 at 10:35
  • If you want to format your email address you can do so in your controlled component by adding a space where you need in you `onFieldChange` method. – Pineda Jan 31 '17 at 10:35
  • @jbarradas: `email` input is useful becuase it adds some validation for the content. It also means that users on mobile devices get the correct keyboard relating to email input (i.e. one that includes the '@' symbol) – Pineda Jan 31 '17 at 10:37
  • It's strange how you say it makes the cursor jump around. Can you add the code for your `onFieldChange` method? – Pineda Jan 31 '17 at 10:38
  • I think the `` wrapper might be messing something up, because onChange wouldn't even accept value as second argument for normal inputs. I Just tested it and for `` it doesn't strip anything. – Lyubomir Jan 31 '17 at 10:40
  • It does not have to do with the wrapper. This also applies to the normal input element: https://codepen.io/anon/pen/RKQrvr?editors=0010 – Marc Jan 31 '17 at 11:50
  • So you want to use the email as input type, but don't trim the trailing space? Just curios why you need the trailing space? As it is not a normal email format. – Cesar Ho Feb 01 '17 at 12:24
  • I want to use it as an input type for email. But I don't want the form to have such a strange behaviour. I imagine having a strange user that inserts a space and afterwards removes it because he realised it's wrong. It should be indifferent what's in the field, at least until you submit. – Marc Feb 01 '17 at 19:25
  • Possible duplicate of [Cannot trim whitespace on email input](https://stackoverflow.com/questions/38901062/cannot-trim-whitespace-on-email-input) – VDWWD Oct 09 '19 at 12:55

0 Answers0