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'];