[Autocomplete] Android-specific: In form, can't issue enter keydown event

[VityaSchel]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When I type text into Autocomplete TextField, normally I would press Enter key to submit into it. On Android, keybord has Next button which prevents me from pressing enter and submitting text (submit on blur is disabled).

Expected Behavior 🤔

Since chrome and HTML has no option to change button on keyboard, I suggest adding custom event to Autocomplete to submit typed text

Your Environment 🌎

`npx @mui/envinfo`

``` Chrome 95 System: OS: macOS 11.4 Binaries: Node: 16.10.0 - /usr/local/bin/node Yarn: 1.22.11 - /usr/local/bin/yarn npm: 7.24.0 - /usr/local/bin/npm Browsers: Chrome: 95.0.4638.54 Edge: Not Found Firefox: 90.0 Safari: 14.1.1 npmPackages: @emotion/react: ^11.4.1 => 11.4.1 @emotion/styled: ^11.3.0 => 11.3.0 @mui/core: 5.0.0-alpha.47 @mui/lab: ^5.0.0-alpha.49 => 5.0.0-alpha.49 @mui/material: ^5.0.0 => 5.0.0 @mui/private-theming: 5.0.1 @mui/styled-engine: 5.0.1 @mui/system: 5.0.2 @mui/types: 7.0.0 @mui/utils: 5.0.1 @types/react: 17.0.21 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 ```

[MS-elug]

I upvote this topic, this behavior on mobile makes the use of autocomplete buggy.

[MS-elug]

@VityaSchel As a workaround, you can set the TextField component to be multiline, it works "<TextField multiline rows={1} ../>"

[TrySpace]

@MS-elug Thanks for the workaround!

But this should be labelled a bug, since it's an android (mobile?) specific issue, on desktop the behavior is different and does not move to the next field when pressing Enter.

@mui: ^5.11.12,

[adriancuadrado]

Any progress on this issue?

@MS-elug Your workaround works, but now I have a miniscrollbar in my input. How do I remove it? Setting overflowY: 'hidden' using the sx property doesn't work.

See that tiny rectangle right next to the X? That's what Im talking aobut.

The reason why this happens is because when I press Enter:

1. The value changes
2. The focus is moved to the next input
3. The newline character that is usually entered when you press Enter is introduced in this new input

---

EDIT: Ok I figured it out. You have to replace \n in the Autocomplete's input value, like this:

<Autocomplete
  inputValue={inputValue.replace('\n', '')}
  onInputChange={(_, v) => setInputValue(v)}
  // ...
/>

Now the problem is the warning you get, you just can't get rid of it:

useAutocomplete.js:452 A textarea element was provided to Autocomplete where input was expected.
This is not a supported scenario but it may work under certain conditions.
A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).
Make sure to test keyboard navigation and add custom event handlers if necessary.