[Autocomplete] Don't close popup when Ctrl/Meta is pressed (#22696)

mui · Sep 23, 2020 · c5fe5f3 · c5fe5f3
1 parent 6e64561
commit c5fe5f3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -834,6 +834,40 @@ describe('<Autocomplete />', () => {
       expect(handleClose.callCount).to.equal(1);
     });
 
+    it('does not close the popup when option selected if Control is pressed', () => {
+      const handleClose = spy();
+      const { getAllByRole } = render(
+        <Autocomplete
+          {...defaultProps}
+          onClose={handleClose}
+          open
+          options={['one', 'two']}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+
+      const options = getAllByRole('option');
+      fireEvent.click(options[0], { ctrlKey: true });
+      expect(handleClose.callCount).to.equal(0);
+    });
+
+    it('does not close the popup when option selected if Meta is pressed', () => {
+      const handleClose = spy();
+      const { getAllByRole } = render(
+        <Autocomplete
+          {...defaultProps}
+          onClose={handleClose}
+          open
+          options={['one', 'two']}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+
+      const options = getAllByRole('option');
+      fireEvent.click(options[0], { metaKey: true });
+      expect(handleClose.callCount).to.equal(0);
+    });
+
     it('moves focus to the first option on ArrowDown', () => {
       const { getAllByRole, getByRole } = render(
         <Autocomplete

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -563,7 +563,7 @@ export default function useAutocomplete(props) {
     resetInputValue(event, newValue);
 
     handleValue(event, newValue, reason, { option });
-    if (!disableCloseOnSelect) {
+    if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
       handleClose(event, reason);
     }