[Autocomplete] Don't close the popup when Ctrl/Shift clicks

[bishonen]

In an Autocomplete component that contains the multiple prop, it would be a great feature to have a ctrl click functionality. E.g. simply clicking with the mouse should select a single item. Only when ctrl+click is used the popup shouldn't close, allowing to select more options.

[oliviertassinari]

I have seen a related request in select2/select2#5302 for range selection but there is low traction for it.
I haven't seen it implemented anywhere, see the benchmarking list: https://www.notion.so/mui-org/e6efee7c4e6a467487b5efb9b07b9fc3?v=b4467d9174084d8286548631756d4795&p=96963c221d994c9ab9fbb3db5517faab.

[kevin-brown]

It's useful to note that Select2 has implemented this many many years ago with the CTRL key (recently adding the meta key in select2/select2#5222).

#19654 (comment) The ticket which was linked is for using SHIFT to select a range at once instead of a single one, which Select2 does not currently support.

[oliviertassinari]

@kevin-brown Thanks for mentioning this! What do you think about this diff for the Autocomplete?

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index feea18c89f..a12ff69dc2 100644
--- 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);
     }

Do you want to work on a pull request? :) (we would also need new tests)

Regarding the Select, we are working on it in #21753.

[montelius]

Hello! :) Can I work on a pull request for this?

[oliviertassinari]

@montelius yes :)

[montelius]

@oliviertassinari Nice, thanks! :) So this is the first time I'm working with Material-UI, and I'm a bit confused about how the unit tests are structured. What tests would be suitable to implement for this feature? Could you maybe refer me to unit tests of other components that are similar so that I could get an idea of what would be a good test case? Tried to find something myself but didn't manage, would be grateful for your help!

[oliviertassinari]

@montelius You can find the tests in https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js. More details around tests in https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md.

[montelius]

@oliviertassinari Yes thanks, thought the tests should go in useAutocomplete.test.js but that makes sense, I'll create a PR soon!