[autocomplete] Fix item removal when it receives focus from VoiceOver before using Backspace

[silviuaavram]

• I have followed (at least) the PR section of the contributing guide.

When focus on the selected items, in a multiple selection autocomplete, comes from a non native keyboard event, we are not updating the state with the focused item. In the issue case, the focus comes from VoiceOver navigation. Also, VoiceOver is sending another Backspace event on the input immediately after it sent one to the Chip.

Consequently, instead of deleting the one focused item, we were deleting 3 items: focused one (actually a Chip delete handler), and 2 from the end, one because focusedItem was -1 (not updating according to VoiceOver focus) and one because of the extra input backspace event.

Fixes:

• on item focus, sync the focusedItem state.
• when we delete a chip with backspace, keep the deletion information in ref, and when the second Backspace event on the input happens, exit and restore the ref info. This is not ideal, but I can't figure anything better.

Added tests for the focusedItem sync only. The second case, related to VoiceOver sending another Backspace event on top of the Chip one, is impossible to unit test.

Fixes #44936

[code-infra-dashboard]

Deploy preview

https://deploy-preview-48572--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+177B(+0.03%)	🔺+53B(+0.04%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[Copilot]

Pull request overview

This PR addresses an accessibility-related Autocomplete (multiple) regression where VoiceOver-driven focus/backspace interactions could cause extra chip removals by syncing focused chip state on focus and attempting to suppress a VoiceOver-specific synthetic Backspace.

Changes:

• Add onFocus to tag/chip props to keep focusedItem in sync when focus comes from non-keyboard sources (e.g. VoiceOver navigation).
• Add a ignoreNextBackspaceRef mechanism intended to suppress a synthetic Backspace event that VoiceOver dispatches to the input after chip deletion.
• Update existing tag-navigation tests to use user.keyboard and add new tests to validate focused-chip removal behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/mui-material/src/useAutocomplete/useAutocomplete.js	Adds focused chip sync on focus and introduces a ref-based suppression for VoiceOver’s extra Backspace event.
packages/mui-material/src/Autocomplete/Autocomplete.test.js	Migrates relevant tests to user.keyboard and adds assertions for removing only the focused chip.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

[mj12albert]

Found an issue with the ignoreNextBackspaceRef logic, reproducible here: https://deploy-preview-48572--material-ui.netlify.app/material-ui/react-autocomplete/#limit-tags

Steps:

1. Click the input to focus it (popup opens)
2. ArrowLeft once, the "The Empire Strikes Back" chip becomes focused
3. Backspace once, the chip is removed
4. Backspace again, nothing happens; I expected the next chip to be deleted

[silviuaavram]

I've been trying to avoid this logic but somehow I could not find any alternative. Will continue to dig into it.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

[mj12albert]

Looks good, tested the fix with VO+Chrome/Safari