Skip to content

[autocomplete] Fix ArrowLeft, Backspace & Delete behavior for multiple and single-value rendering with proper caret handling #47411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jnbain wants to merge 21 commits into
base: master
Choose a base branch
from
Open

[autocomplete] Fix ArrowLeft, Backspace & Delete behavior for multiple and single-value rendering with proper caret handling #47411

jnbain wants to merge 21 commits into from
+183 −15

Conversation

@jnbain
Copy link

@jnbain jnbain commented Dec 3, 2025 •
edited by ZeeshanTamboli
Loading

Fixes #47241

Checklist

  • The branch is targeted at master
  • I have tested the changes locally
  • The code follows the project's coding style (prettier applied)
  • Tests added/updated (guidance needed - this is my first PR to Material-UI)

Previews:

jnbain added 3 commits December 2, 2025 17:14
@jnbain
[Autocomplete] Fix ArrowLeft behavior in multiple mode with input text
a0239d1 
- Only select chip/value when cursor is at start of input (position 0)
- Makes multiple mode consistent with single mode behavior
- Fixes mui#47241
@jnbain
Resolve merge conflict - keep cursor position check fix
a800fcf
@jnbain
Merge upstream/master and apply prettier formatting
1be6bb9
@mui-bot
Copy link

mui-bot commented Dec 3, 2025 •
edited
Loading

Netlify deploy preview

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

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+199B(+0.04%) 🔺+57B(+0.04%)
@mui/lab 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

Generated by 🚫 dangerJS against 60afc1f

@mj12albert
Copy link
Member

mj12albert commented Dec 3, 2025 

Single mode: Pressing ArrowLeft selects the value even when the input field contains text
Multiple mode: Pressing ArrowLeft does nothing when the input field contains text

TBH I don't really understand this, do you press ArrowLeft when the input is already focused? Would appreciate a screen recording if possible

@zannager zannager added the scope: autocomplete Changes related to the autocomplete. This includes ComboBox. label Dec 3, 2025
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Dec 4, 2025 •
edited
Loading 

Single mode: Pressing ArrowLeft selects the value even when the input field contains text
Multiple mode: Pressing ArrowLeft does nothing when the input field contains text

TBH I don't really understand this, do you press ArrowLeft when the input is already focused? Would appreciate a screen recording if possible

@mj12albert Yes, it happens when the input is focused. By “value,” the author meant the selected value Chip. The behavior in the fix matches Base UI Combobox: https://base-ui.com/react/components/combobox#multiple-select (which I suppose is ARIA compliant).

ZeeshanTamboli
ZeeshanTamboli reviewed Dec 4, 2025
View reviewed changes
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jnbain Thanks for the PR. Some existing tests are failing that can be checked in CI.

@ZeeshanTamboli ZeeshanTamboli added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Dec 4, 2025
@mj12albert
Copy link
Member

mj12albert commented Dec 4, 2025

I think the change is fine, though I don't think this behavior is specified in ARIA

Single mode: Pressing ArrowLeft selects the value even when the input field contains text

The issue is this, assuming it's referring to https://mui.com/material-ui/react-autocomplete/#single-value-rendering

The behavior seems buggy as you can't move the caret through the whole text, it just jumps from the end to the chip

So I suppose it's not that the behaviors are inconsistent between single/multiple but they each have their individual bugs

@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui][Autocomplete] Fix ArrowLeft behavior in multiple mode with input text [autocomplete] Fix ArrowLeft behavior in multiple mode with input text Dec 4, 2025
@ZeeshanTamboli ZeeshanTamboli changed the title [autocomplete] Fix ArrowLeft behavior in multiple mode with input text [autocomplete] Fix <kbd>ArrowLeft</kbd> behavior in multiple mode with input text Dec 4, 2025
@ZeeshanTamboli ZeeshanTamboli changed the title [autocomplete] Fix <kbd>ArrowLeft</kbd> behavior in multiple mode with input text [autocomplete] Fix ArrowLeft behavior in multiple mode with input text Dec 4, 2025
@ZeeshanTamboli ZeeshanTamboli changed the title [autocomplete] Fix ArrowLeft behavior in multiple mode with input text [autocomplete] Fix ArrowLeft behavior in multiple and single value rendering mode with input text Dec 5, 2025
@ZeeshanTamboli ZeeshanTamboli changed the title [autocomplete] Fix ArrowLeft behavior in multiple and single value rendering mode with input text [autocomplete] Fix ArrowLeft, Backspace and Delete behavior in multiple and single value rendering mode with input text Dec 5, 2025
@ZeeshanTamboli ZeeshanTamboli added type: bug It doesn't behave as expected. and removed type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Dec 6, 2025
@ZeeshanTamboli ZeeshanTamboli changed the title [autocomplete] Fix ArrowLeft, Backspace and Delete behavior in multiple and single value rendering mode with input text [autocomplete] Fix ArrowLeft, Backspace & Delete behavior for multiple and single-value rendering with proper caret handling Dec 8, 2025
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Dec 8, 2025

@jnbain Made the expected changes, including fixes for Backspace and Delete. I have also added tests. @mj12albert would you mind reviewing?

mj12albert
mj12albert reviewed Dec 15, 2025
View reviewed changes
packages/mui-material/src/useAutocomplete/useAutocomplete.js
// always jump to the last tag (if any) from the input.
if (focusedItem === -1 && direction === 'previous') {
nextItem = value.length - 1;
// In freeSolo, clear any draft text so it doesn't "come back" later.
Copy link
Member

@mj12albert mj12albert Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are there any downsides to keeping the input string here? Might be frustrating to arrow too far and lose all the text 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mj12albert mj12albert mj12albert left review comments

@ZeeshanTamboli ZeeshanTamboli ZeeshanTamboli left review comments

@siriwatknp siriwatknp Awaiting requested review from siriwatknp

@sai6855 sai6855 Awaiting requested review from sai6855

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

scope: autocomplete Changes related to the autocomplete. This includes ComboBox. type: bug It doesn't behave as expected.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[autocomplete] Inconsistent behavior between single and multiple rendered values

5 participants

@jnbain @mui-bot @mj12albert @ZeeshanTamboli @zannager