diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js index e80bcd91913a09..75d9a8952e1c76 100644 --- a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js +++ b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js @@ -859,6 +859,16 @@ export default function useAutocomplete(props) { }); } break; + case 'Delete': + if (multiple && !readOnly && inputValue === '' && value.length > 0 && focusedTag !== -1) { + const index = focusedTag; + const newValue = value.slice(); + newValue.splice(index, 1); + handleValue(event, newValue, 'removeOption', { + option: value[index], + }); + } + break; default: } } diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 4ab7e72c573b00..f4282ecdfe31b0 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -486,6 +486,42 @@ describe('', () => { expect(textbox).toHaveFocus(); }); + it('deletes a focused tag when pressing the delete key', () => { + const handleChange = spy(); + const options = ['one', 'two']; + render( + } + multiple + />, + ); + const textbox = screen.getByRole('combobox'); + const [firstSelectedValue, secondSelectedValue] = screen.getAllByRole('button'); + + // check that no tags get deleted when the tag is not a focused tag + fireEvent.keyDown(textbox, { key: 'Delete' }); + + expect(handleChange.callCount).to.equal(0); + expect(textbox).toHaveFocus(); + + // expect on focused tag to delete when pressing delete key + fireEvent.keyDown(textbox, { key: 'ArrowLeft' }); + + expect(secondSelectedValue).toHaveFocus(); + + fireEvent.keyDown(secondSelectedValue, { key: 'ArrowLeft' }); + + expect(firstSelectedValue).toHaveFocus(); + + fireEvent.keyDown(firstSelectedValue, { key: 'Delete' }); + + expect(handleChange.callCount).to.equal(1); + expect(textbox).toHaveFocus(); + }); + it('should keep listbox open on pressing left or right keys when inputValue is not empty', () => { const handleClose = spy(); const options = ['one', 'two', 'three'];