mui
[autocomplete] Fix `ArrowLeft`, `Backspace` & `Delete` behavior for multiple and single-value rendering with proper caret handling
Fixes #47241
Checklist
- [x] The branch is targeted at
master - [x] I have tested the changes locally
- [x] The code follows the project's coding style (prettier applied)
- [x] Tests added/updated (guidance needed - this is my first PR to Material-UI)
Previews:
- Single value rendering: https://deploy-preview-47411--material-ui.netlify.app/material-ui/react-autocomplete/#single-value-rendering
- Multiple: https://deploy-preview-47411--material-ui.netlify.app/material-ui/react-autocomplete/#multiple-values
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%) |
Generated by :no_entry_sign: dangerJS against 60afc1f71cdeaf9c531e63474631900e741ed1e1
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
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 textTBH 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).
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
@jnbain Made the expected changes, including fixes for Backspace and Delete. I have also added tests. @mj12albert would you mind reviewing?