[autocomplete] Enter key behavior when `autoHighlight` and `freeSolo` both enabled
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Prerequisite - MUI version 7.3.11 or newer (9.1.1 used in live example)
The behavior of autocomplete when both autoHighlight and freeSolo are enabled is incorrect. On Enter keypress instead of selecting the first auto-highlighted value like in previous versions, the form is submitted instead.
Steps:
- Open this link to live example: https://stackblitz.com/edit/github-res5d2ru?file=package.json,src%2FApp.tsx
- Click on the autocomplete input
- Type "New" into the input, do not do anything else, including moving the mouse.
- Notice that "New York" option is automatically highlighted.
- Press Enter
Current behavior
The Form is submitted.
Expected behavior
The value "New York" is selected, form is not submitted. Same behavior as in previous MUI versions before 7.3.11.
Context
Issue started with version 7.3.11. and is not reproducible on version 7.3.10. Have the same issue with MUI 9.1.1. We suspect that this commit is at fault: https://github.com/mui/material-ui/commit/290c896
Happens both in Firefox and Chrome.
Your environment
npx @mui/envinfo
System:
OS: Linux 5.0 undefined
Binaries:
Node: 22.22.3 - /usr/local/bin/node
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
@emotion/react: latest => 11.14.0
@emotion/styled: latest => 11.14.1
@mui/core-downloads-tracker: 9.1.1
@mui/icons-material: latest => 9.1.1
@mui/material: latest => 9.1.1
@mui/private-theming: 9.1.1
@mui/styled-engine: 9.1.1
@mui/system: 9.1.1
@mui/types: 9.1.1
@mui/utils: 9.1.1
@types/react: latest => 19.2.17
react: latest => 19.2.7
react-dom: latest => 19.2.7
typescript: latest => 6.0.3
Search keywords: autocomplete, autoHighlight, freeSolo
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the StackBlitz example in src/App.tsx and compare the behavior between MUI 7.3.10 and 7.3.11. Then inspect commit 290c896 and the autocomplete keyboard-handling path. Done means pressing Enter with autoHighlight and freeSolo selects the highlighted New York option instead of submitting the form.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100