[SOLVED] How can I prioritize non auto capitalization from my input fields over IPads in the Input Commponent from Material UI?

How can I prioritize non auto capitalization from my input fields over IPads in the Input Commponent from Material UI?

This issue is specific with Material UI and IPad, as I need to change the component from MUI.

I am currently using the Input component from Material UI.

When I click on the input, the IPad keyboard opens, and automatically capitalizes the first letter.

I am aware that this can be changed from the settings from the IPad, but this is not the behavior we are trying to achieve.

I need that regardless of the settings from the IPad, the Input will not automatically have the first letter as capital letter, unless the user intentionally wants capital letters by clicking on the capital letter button.

I am aware that Material UI does not have the autoCapitalize property. I have tested it just in case, and it doesn't work.

Material UI version: 5.8.1

IPadOS: 16 and 17 tested

Documentation I am using https://mui.com/material-ui/api/input/

snippet:

import { Input } from '@mui/material';

<Input      
  id={id}
  placeholder={placeholder}
  type={type}
  value={value}
  onChange={onChange}
/>

Solution

You have to pass autocapitalize to the underlying HTML input via MUI Input's inputProps, since it is a part of the HTML standard, not a part of MUI. For example:

<Input
  id="component-simple"
  defaultValue=""
  inputProps={{
    autocapitalize: "off"
  }}
/>

Working CodeSandbox: https://codesandbox.io/s/mui-auto-capitalize-fp3shl?file=/Demo.tsx iPad-friendly link to test: https://fp3shl.csb.app/