diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 8f0e550148d307..b650fe7dd72f96 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -3683,6 +3683,49 @@ describe('', () => { expect(view.container.querySelector(`.${chipClasses.root}`)).to.have.text('0'); }); + + it('should not throw error on pressing ArrowLeft key with no value in single value rendering', () => { + render( + { + return value ? : null; + }} + renderInput={(params) => } + />, + ); + + const textbox = screen.getByRole('combobox'); + + expect(() => { + fireEvent.keyDown(textbox, { key: 'ArrowLeft' }); + }).not.to.throw(); + + expect(textbox).toHaveFocus(); + }); + + it('should not throw error on pressing ArrowLeft key with input text but no value in single value rendering', () => { + render( + { + return value ? : null; + }} + renderInput={(params) => } + />, + ); + + const textbox = screen.getByRole('combobox'); + + fireEvent.change(textbox, { target: { value: 'on' } }); + + expect(() => { + fireEvent.keyDown(textbox, { key: 'ArrowLeft' }); + }).not.to.throw(); + + expect(textbox).to.have.property('value', 'on'); + expect(textbox).toHaveFocus(); + }); }); it('should not shrink the input label when value is an empty array in multiple mode using renderValue', () => { diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index bd7831f4b1d966..7c8116dd6baf33 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -853,7 +853,7 @@ function useAutocomplete(props) { handleOpen(event); break; case 'ArrowLeft': - if (!multiple && renderValue) { + if (!multiple && renderValue && value != null) { focusItem(0); } else { handleFocusItem(event, 'previous');