[Autocomplete] Navigation event is triggered twice by IME

[jiggum]

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

Current Behavior 😯

When the ArrowDown↓ is pressed at IME composing state, the second below option is highlighted.
(This is not only for ArrowDown↓ key. All of the below switch-case's each key has this problem)
https://github.com/mui-org/material-ui/blob/5c9c97675f3e7d3978e664520f3fbbe595c78eee/packages/material-ui/src/useAutocomplete/useAutocomplete.js#L662-L771

Expected Behavior 🤔

When the ArrowDown↓ is pressed at IME composing state, the first below option should highlighted.

Steps to Reproduce 🕹

Steps:

1. See https://codesandbox.io/s/material-demo-forked-bdu70
2. Make IME on with character '가'
3. Hit ArrowDown↓
4. The second below option is highlighted

Context 🔦

This Problem is related to #19435.

To expected behavior, I think below whole swich-case statements should place under the if statement of

if (event.which !== 229)

https://github.com/mui-org/material-ui/blob/5c9c97675f3e7d3978e664520f3fbbe595c78eee/packages/material-ui/src/useAutocomplete/useAutocomplete.js#L662-L771

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
Material-UI Lab	v4.0.0-alpha.56
React	v16.13.1
Browser	macOS, Chrome/85.0.4183.102

[oliviertassinari]

@jiggum The proposed solution sounds great. Do you want to submit a pull request for it :)?

I had a look at what the others are doing:

• Dynamic option creation does not play well with Chinese IME select2/select2#5837
• fix: not seperating words while compositing react-component/select#505
• Fix IME composition for non-Chrome browsers JedWatson/react-select#3563