diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index 633763d7d4ec53..d8da9d3a9dddba 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -910,6 +910,24 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'Enter' }); expect(container.querySelectorAll('[class*="MuiChip-root"]')).to.have.length(3); }); + + it('should not fire change event until the IME is confirmed', () => { + const handleChange = spy(); + render( + } + />, + ); + // Actual behavior when "あ" (Japanese) is entered on macOS/Safari with IME + fireEvent.change(document.activeElement, { target: { value: 'あ' } }); + fireEvent.keyDown(document.activeElement, { key: 'Enter', keyCode: 229 }); + expect(handleChange.callCount).to.equal(0); + fireEvent.keyDown(document.activeElement, { key: 'Enter', keyCode: 13 }); + expect(handleChange.callCount).to.equal(1); + expect(handleChange.args[0][1]).to.equal('あ'); + }); }); describe('prop: onInputChange', () => { diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 00e7ca020f5844..632fb2bf450590 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -584,6 +584,10 @@ export default function useAutocomplete(props) { handleFocusTag(event, 'next'); break; case 'Enter': + // Wait until IME is settled. + if (event.which === 229) { + break; + } if (highlightedIndexRef.current !== -1 && popupOpen) { // We don't want to validate the form. event.preventDefault();