Merge pull request #6220 from tchak/fix-multi-select

Fix multi select

app/javascript/components/ComboMultipleDropdownList.jsx

@@ -19,6 +19,7 @@ import '@reach/combobox/styles.css';
 import { matchSorter } from 'match-sorter';
 import { fire } from '@utils';
 import { XIcon } from '@heroicons/react/outline';
+import isHotkey from 'is-hotkey';
 
 const Context = createContext();
 
@@ -83,7 +84,12 @@ function ComboMultipleDropdownList({
   };
 
   const onKeyDown = (event) => {
-    if (event.key === 'Enter') {
+    if (
+      isHotkey('enter', event) ||
+      isHotkey(' ', event) ||
+      isHotkey(',', event) ||
+      isHotkey(';', event)
+    ) {
       if (
         term &&
         [...extraOptions, ...options].map(([label]) => label).includes(term)
@@ -94,28 +100,42 @@ function ComboMultipleDropdownList({
     }
   };
 
-  const saveSelection = (selections) => {
+  const onBlur = (event) => {
-    setSelections(selections);
+    if (
-    if (hiddenField) {
+      acceptNewValues &&
-      hiddenField.setAttribute('value', JSON.stringify(selections));
+      term &&
-      fire(hiddenField, 'autosave:trigger');
+      [...extraOptions, ...options].map(([label]) => label).includes(term)
+    ) {
+      event.preventDefault();
+      return onSelect(term);
     }
   };
 
+  const saveSelection = (fn) => {
+    setSelections((selections) => {
+      selections = fn(selections);
+      if (hiddenField) {
+        hiddenField.setAttribute('value', JSON.stringify(selections));
+        fire(hiddenField, 'autosave:trigger');
+      }
+      return selections;
+    });
+  };
+
   const onSelect = (value) => {
     const maybeValue = [...extraOptions, ...options].find(
       ([val]) => val == value
     );
     const selectedValue = maybeValue && maybeValue[1];
-    if (value) {
+    if (selectedValue) {
       if (
         acceptNewValues &&
         extraOptions[0] &&
         extraOptions[0][0] == selectedValue
       ) {
-        setNewValues([...newValues, selectedValue]);
+        setNewValues((newValues) => [...newValues, selectedValue]);
       }
-      saveSelection([...selections, selectedValue]);
+      saveSelection((selections) => [...selections, selectedValue]);
     }
     setTerm('');
   };
@@ -123,8 +143,12 @@ function ComboMultipleDropdownList({
   const onRemove = (label) => {
     const optionValue = optionValueByLabel(label);
     if (optionValue) {
-      saveSelection(selections.filter((value) => value != optionValue));
+      saveSelection((selections) =>
-      setNewValues(newValues.filter((value) => value != optionValue));
+        selections.filter((value) => value != optionValue)
+      );
+      setNewValues((newValues) =>
+        newValues.filter((value) => value != optionValue)
+      );
     }
     inputRef.current.focus();
   };
@@ -149,10 +173,11 @@ function ComboMultipleDropdownList({
           value={term}
           onChange={handleChange}
           onKeyDown={onKeyDown}
+          onBlur={onBlur}
           autocomplete={false}
         />
       </ComboboxTokenLabel>
-      {results && (
+      {results && (results.length > 0 || !acceptNewValues) && (
         <ComboboxPopover className="shadow-popup">
           {results.length === 0 && (
             <p>

package.json

@@ -19,6 +19,7 @@
     "email-butler": "^1.0.13",
     "highcharts": "^8.1.1",
     "intersection-observer": "^0.12.0",
+    "is-hotkey": "^0.2.0",
     "mapbox-gl": "^1.3.0",
     "match-sorter": "^6.2.0",
     "prop-types": "^15.7.2",

yarn.lock

@@ -6982,6 +6982,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hotkey@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-hotkey/-/is-hotkey-0.2.0.tgz#1835a68171a91e5c9460869d96336947c8340cef"
+  integrity sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==
+
 is-installed-globally@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"