`inputmode` attribute not set on input element when using `customInput`

[Vilberg Eliasson]

Describe the issue and the actual behavior

I noticed in my snapshot tests that the inputmode attribute is being set on the root element of the customInput component. In my case (MUI TextField) this element is a div, which makes the attribute redundant as it has to be on the input element in order to present the correct keyboard.

HTML output

<div
  class="MuiFormControl-root ..."
  inputmode="numeric" <!-- inputmode gets set here -->
>
  <label
    class="MuiFormLabel-root ..."
    data-shrink="false"
  >
    string
  </label>
  <div
    class="MuiInputBase-root ..."
  >
    <input
     <!-- inputmode should be here -->
      class="MuiInputBase-input ..."
      name="string"
      type="text"
      value=""
    />
  </div>
</div>

Jest snapshot output. Some unrelated attributes have been omitted or truncated for readability

Describe the expected behavior

inputmode="numeric" should be set on the input element instead of the root element.

Provide a CodeSandbox link illustrating the issue

This can be reproduced with the demo on the documentation site:

https://codesandbox.io/s/custominput-demo-u3wg9m

Provide steps to reproduce this issue

Please check the browsers where the issue is seen

Note: I don't believe this is a browser specific issue.

• Chrome
• Chrome (Android)
• Safari (OSX)
• Safari (iOS)
• Firefox
• Firefox (Android)

[Vilberg Eliasson]

I looked a bit at the implementation now and I can see that all props are just spread out to the custom input directly. I had imagined there was something more elaborate at play.

I can solve this by just using the inputProps that the MUI component exposes, but the extra attribute will always be there.

I suppose I could also use the hook to get more control.

[Sudhanshu Yadav]

the extra attribute wont be there if you pass it in the inputProps. As all the extra props are forward to the customInput to handle. Doing this will make MaterialUI to handle it.

<NumericFormat
          value={12323}
          prefix="$"
          thousandSeparator
          customInput={TextField}
          inputProps={{
            inputMode: 'numeric'
          }}
          {...materialUITextFieldProps}
        />