accepte nouvelles valeurs pour ComboMultipleDropdownList

app/javascript/components/ComboMultipleDropdownList.js

@@ -25,7 +25,8 @@ function ComboMultipleDropdownList({
   options,
   hiddenFieldId,
   selected,
-  label
+  label,
+  acceptNewValues = false
 }) {
   if (label == undefined) {
     label = 'Choisir une option';
@@ -36,6 +37,7 @@ function ComboMultipleDropdownList({
   const inputRef = useRef();
   const [term, setTerm] = useState('');
   const [selections, setSelections] = useState(selected);
+  const [newValues, setNewValues] = useState([]);
   const results = useMemo(
     () =>
       (term
@@ -56,6 +58,28 @@ function ComboMultipleDropdownList({
     setTerm(event.target.value);
   };
 
+  const onKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      if (term && options.map((o) => o[0]).includes(term)) {
+        event.preventDefault();
+        return onSelect(term);
+      }
+      if (
+        acceptNewValues &&
+        term &&
+        matchSorter(
+          options.map((o) => o[0]),
+          term
+        ).length == 0 // ignore when was pressed for selecting popover option
+      ) {
+        event.preventDefault();
+        setNewValues([...newValues, term]);
+        saveSelection([...selections, term]);
+        setTerm('');
+      }
+    }
+  };
+
   const saveSelection = (selections) => {
     setSelections(selections);
     if (hiddenField) {
@@ -72,7 +96,11 @@ function ComboMultipleDropdownList({
 
   const onRemove = (value) => {
     saveSelection(
-      selections.filter((s) => s !== options.find((o) => o[0] == value)[1])
+      selections.filter((s) =>
+        newValues.includes(value)
+          ? s != value
+          : s !== options.find((o) => o[0] == value)[1]
+      )
     );
     inputRef.current.focus();
   };
@@ -88,7 +116,10 @@ function ComboMultipleDropdownList({
           {selections.map((selection) => (
             <ComboboxToken
               key={selection}
-              value={options.find((o) => o[1] == selection)[0]}
+              value={
+                newValues.find((newValue) => newValue == selection) ||
+                options.find((o) => o[1] == selection)[0]
+              }
             />
           ))}
         </ul>
@@ -96,6 +127,7 @@ function ComboMultipleDropdownList({
           ref={inputRef}
           value={term}
           onChange={handleChange}
+          onKeyDown={onKeyDown}
           autocomplete={false}
         />
       </ComboboxTokenLabel>
@@ -211,7 +243,8 @@ ComboMultipleDropdownList.propTypes = {
   hiddenFieldId: PropTypes.string,
   selected: PropTypes.arrayOf(PropTypes.string),
   arraySelected: PropTypes.arrayOf(PropTypes.array),
-  label: PropTypes.string
+  label: PropTypes.string,
+  acceptNewValues: PropTypes.bool
 };
 
 export default ComboMultipleDropdownList;

app/views/new_administrateur/groupe_instructeurs/show.html.haml

@@ -27,7 +27,11 @@
           %p.notice Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
         - hidden_field_id = SecureRandom.uuid
         = hidden_field_tag :emails, nil, data: { uuid: hidden_field_id }
-        = react_component("ComboMultipleDropdownList", options: @available_instructeur_emails, selected: [], disabled: [], hiddenFieldId: hidden_field_id, label: 'email instructeur')
+        = react_component("ComboMultipleDropdownList",
+          options: @available_instructeur_emails, selected: [], disabled: [],
+          hiddenFieldId: hidden_field_id,
+          label: 'email instructeur',
+          acceptNewValues: true)
 
         = f.submit 'Affecter', class: 'button primary send'
 

spec/features/routing/full_scenario_spec.rb

@@ -30,9 +30,7 @@ feature 'The routing', js: true do
     expect(page).to have_field('Nom du groupe', with: 'littéraire')
 
     # add victor to littéraire groupe
-    # find('input.select2-search__field').send_keys('victor@inst.com', :enter)
     find("input[aria-label='email instructeur'").send_keys('victor@inst.com', :enter)
-    click_on 'Affecter'
     perform_enqueued_jobs { click_on 'Affecter' }
     expect(page).to have_text("Les instructeurs ont bien été affectés à la démarche")