Material-ui: [TextField] Autocapitalize property ignored

Created on 13 Feb 2018  路  5Comments  路  Source: mui-org/material-ui

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior


In v0.x the Autocapitalize property would prevent mobile device keyboards from capitalizing the first letter - after upgrading to 1.x this does not seem to be the case

Current Behavior

The Autocapitalize property seems to do nothing to prevent (on mobile devices especially) the first letter entered into the Textfield from being automatically capitalized (the device keyboard will SHIFT automatically when the Textfield is selected)

I have tried every variant I can think of from autoCapitalize="none" (which is what I used in v0.x) to autoCapitalize="off" (which I've seen in various docs on the web) as well as writing the prop out all lowercase (which I believe is the raw html way to do it) and every variation in between.

Context


We use the textfield component for our login form - we have case-sensitive usernames which are often not capitalized. I would prefer not to have to revert to v0.x for this one case as this was a working feature and seems like it would be needed for v1.x as well.

TextField question

Most helpful comment

@tonymckendry The solution to your problem is:

<TextField
  inputProps={{
    autoCapitalize: 'none',
  }}
/>

capture d ecran 2018-02-13 a 19 56 02

https://codesandbox.io/s/koykw4w8vo

All 5 comments

Have you tried inputProps?

https://material-ui-next.com/demos/text-fields/#components

"You might also have noticed that some native HTML input properties are missing from the TextField component. This is on purpose. The component takes care of the most used properties, then it's up to the user to use the underlying component shown in the following demo. Still, you can use inputProps (and InputProps, InputLabelProps properties) if you want to avoid some boilerplate."

Sorry must have missed that little blurb - there is no direct example of inputProps being used, but I attempted (as well as all lowercase for the key and 'off' for the value) - does not seem to be making a difference.

@tonymckendry The solution to your problem is:

<TextField
  inputProps={{
    autoCapitalize: 'none',
  }}
/>

capture d ecran 2018-02-13 a 19 56 02

https://codesandbox.io/s/koykw4w8vo

@oliviertassinari - thank you. It turns out that the 3rd party keyboard I am using on my Android device (Swiftkey) is ignoring this rule, but the native Samsung Keyboard and the iOS keyboard are behaving as expected.

Hello All, I would like whatever the user enter in the TextField be transformed to uppercase ? Is there a way to do that with Material-UI components in React JS?

Was this page helpful?
5 / 5 - 1 ratings