[number input] Mobile focus mode

[oliviertassinari]

Steps to reproduce 🕹

Link to live example:

Steps:

1. Open https://mui.com/base-ui/react-number-input/#minimum-and-maximum on mobile
2. Press on one of the buttons

Screen.Recording.2023-10-03.at.02.06.13.mov

Current behavior 😯

See how the input is focused

Expected behavior 🤔

It's not clear to me that we should focus the input. On mobile, it's quite annoying to see the virtual keyboard show when using the button is enough to set the expected value.

It doesn't seem that I'm the only one to be annoyed:

1. Example with https://www.figma.com/purchase-organization/details

Screen.Recording.2023-10-03.at.02.09.47.mov

2. On https://react-spectrum.adobe.com/react-aria/NumberField.html the input is not focused on mobile

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[Aditya-Chaurasia11]

can you please assign this to me?

[Visbhavesh]

assign it to me

[asdotdev]

This same behaviour occurs in all places where NumberInput(Unstable_NumberInput) is being used as a Mui-focused class name is appending in MuiNumberInput-root on button press too and not only on input press.

[omagr]

@mj12albert

I hope this message finds you well. I was wondering if you're currently working on this particular issue. If not, I would greatly appreciate it if you could consider assigning it to me.

[akshayw1]

Could you pls assign it to me?

[dankgen-tobias]

Meanwhile you can use the hook https://mui.com/base-ui/react-number-input/#hook and override the onMouseDown event on the increment/decrement button. Then it won't focus anymore, this is because in the code it says

const handleStepperButtonMouseDown = event => {
    event.preventDefault();
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };