Merge pull request #5903 from betagouv/4865-multi-select-accessible

rend accessible le multi-select

app/assets/stylesheets/add_instructeur.scss

@@ -5,34 +5,4 @@
   .select-instructeurs {
     width: 100%;
   }
-
-  .select2-container--default {
-    .select2-selection--multiple {
-      border: solid 1px $border-grey;
-
-      .select2-selection__choice, // scss-lint:disable SelectorFormat
-      .select2-search--inline {
-        padding: $default-spacer;
-      }
-    }
-
-    &.select2-container--focus {
-      .select2-selection--multiple {
-        border: 1px solid $blue;
-        box-shadow: 0px 0px 2px 1px $blue;
-      }
-    }
-
-    .select2-results__option { // scss-lint:disable SelectorFormat
-      padding: $default-spacer;
-    }
-
-    .custom-select2-option {
-      .icon {
-        margin-right: $default-spacer;
-      }
-    }
-  }
 }
-
-

app/assets/stylesheets/application.scss

@@ -4,6 +4,5 @@
 // = require ./utils
 // = require ./fonts
 // = require leaflet
-// = require select2
 // = require_tree .
 // = stub ./print.scss

app/assets/stylesheets/buttons.scss

@@ -281,18 +281,6 @@
 .dropdown-form {
   padding: 2 * $default-spacer;
 
-  .select2-container {
-    margin-bottom: 2 * $default-spacer;
-  }
-
-  .select2-selection {
-    border: 1px solid $border-grey;
-
-    &.select2-selection--multiple {
-      border: 1px solid $border-grey;
-    }
-  }
-
   &.large {
     width: 340px;
   }
@@ -310,10 +298,6 @@
   }
 }
 
-.select2-dropdown {
-  border: 1px solid $border-grey;
-}
-
 .link {
   color: $blue;
 }

app/assets/stylesheets/forms.scss

@@ -260,8 +260,7 @@
     max-width: 180px;
   }
 
-  select,
+  select {
-  .select2-selection {
     // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -305,39 +304,26 @@
     border-color: $blue;
   }
 
-  .select2 {
+  [data-reach-combobox-token-list] {
-    min-width: 50%;
+    padding: $default-padding;
+    display: flex;
   }
 
-  .select2-container {
+  [data-reach-combobox-token] {
-    display: block;
+    border: solid 1px $border-grey;
-    margin-bottom: $default-fields-spacer;
+    color: $black;
+    margin-top: $default-padding;
+    margin-bottom: $default-padding;
+    margin-right: 0.5 * $default-padding;
+    border-radius: 4px;
+    padding: $default-padding;
+    cursor: pointer;
+    list-style: none;
+  }
 
-    &.select2-container--focus {
+  [data-reach-combobox-token]:focus {
-      .select2-selection {
+    background-color: $black;
-        border-color: $border-grey;
+    color: $white;
-      }
-    }
-
-    .select2-selection--single {
-      min-height: 62px;
-
-      // scss-lint:disable SelectorFormat
-      .select2-selection__arrow {
-        display: none;
-      }
-      // scss-lint:enable
-    }
-
-    // scss-lint:disable SelectorFormat
-    .select2-selection__rendered {
-      padding: $default-padding;
-    }
-
-    .select2-selection__choice {
-      background-color: #FFFFFF;
-    }
-    // scss-lint:enable
   }
 
   .editable-champ {
@@ -481,11 +467,55 @@
   }
 }
 
+[data-react-class="ComboMultipleDropdownList"] {
+  margin-bottom: $default-fields-spacer;
+
+  [data-reach-combobox-input] {
+    outline: none;
+    border: none;
+    flex-grow: 1;
+    margin: 0.25rem;
+    background-image: image-url("icons/chevron-down");
+    background-size: 14px;
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+  }
+
+  [data-reach-combobox-input]:focus {
+    outline: solid;
+    outline-color: $light-blue;
+  }
+}
+
+[data-combobox-token-label] {
+  border: 1px solid #CCCCCC;
+  border-radius: 4px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
 [data-reach-combobox-option] {
   font-size: 16px;
+  list-style-type: none;
 }
 
 [data-reach-combobox-option][aria-selected="true"] {
   background: $light-blue !important;
   color: $white;
 }
+
+[data-combobox-separator] {
+  font-size: 16px;
+  color: $dark-grey;
+  margin-top: 6px;
+}
+
+[data-combobox-remove-token] {
+  color: $dark-grey;
+  padding-right: 4px;
+}
+
+
+[data-reach-combobox-input]:focus {
+  outline-color: $light-blue;
+}

app/assets/stylesheets/personnes_impliquees.scss

@@ -1,14 +1,50 @@
+@import "constants";
+@import "colors";
+
 .personnes-impliquees {
   padding-bottom: 50px;
 
-  ul {
+  ul.tab-list {
     list-style-type: disc;
     margin-left: 16px;
   }
 
-  // scss-lint:disable SelectorFormat
+  [data-react-class="ComboMultipleDropdownList"] {
-  .form .select2-container .select2-selection__rendered {
+    margin-bottom: $default-fields-spacer;
-    padding: 12px;
+
+    [data-reach-combobox-token-list] {
+      padding: 0.5 * $default-padding;
+      display: flex;
+    }
+
+    [data-reach-combobox-token] {
+      border: solid 1px $border-grey;
+      color: $black;
+      margin-top: 0.5 * $default-padding;
+      margin-bottom: 0.5 * $default-padding;
+      margin-right: 0.5 * $default-padding;
+      border-radius: 4px;
+      padding: 0.5 * $default-padding;
+      cursor: pointer;
+      list-style: none;
+    }
+
+    [data-reach-combobox-token]:focus {
+      background-color: $black;
+      color: $white;
+    }
+
+
+    [data-reach-combobox-input] {
+      outline: none;
+      border: none;
+      flex-grow: 1;
+      margin: 0.25rem;
+    }
+
+    [data-reach-combobox-input]:focus {
+      outline: solid;
+      outline-color: $light-blue;
+    }
   }
-  // scss-lint:enable
 }

app/assets/stylesheets/procedure_show.scss

@@ -61,4 +61,42 @@
     margin-bottom: 3 * $default-spacer;
     text-align: center;
   }
+
+  [data-react-class="ComboMultipleDropdownList"] {
+    margin-bottom: $default-fields-spacer;
+
+    [data-reach-combobox-token-list] {
+      padding: 0.25 * $default-padding;
+      display: inline-block;
+      width: 100%;
+    }
+
+    [data-reach-combobox-token] {
+      border: solid 1px $border-grey;
+      color: $black;
+      margin: 0.25 * $default-padding;
+      border-radius: 2px;
+      padding: 0.25 * $default-padding;
+      cursor: pointer;
+      list-style: none;
+    }
+
+    [data-reach-combobox-token]:focus {
+      background-color: $black;
+      color: $white;
+    }
+
+
+    [data-reach-combobox-input] {
+      outline: none;
+      border: none;
+      flex-grow: 1;
+      margin: 0.25rem;
+    }
+
+    [data-reach-combobox-input]:focus {
+      outline: solid;
+      outline-color: $light-blue;
+    }
+  }
 }

app/controllers/instructeurs/dossiers_controller.rb

@@ -72,7 +72,7 @@ module Instructeurs
     end
 
     def send_to_instructeurs
-      recipients = Instructeur.find(params[:recipients])
+      recipients = Instructeur.find(JSON.parse(params[:recipients]))
 
       recipients.each do |recipient|
         recipient.follow(dossier)

app/controllers/instructeurs/procedures_controller.rb

@@ -138,7 +138,7 @@ module Instructeurs
     end
 
     def update_displayed_fields
-      procedure_presentation.update_displayed_fields(params[:values])
+      procedure_presentation.update_displayed_fields(JSON.parse(params[:values]))
 
       redirect_back(fallback_location: instructeur_procedure_url(procedure))
     end

app/controllers/new_administrateur/groupe_instructeurs_controller.rb

@@ -80,8 +80,8 @@ module NewAdministrateur
     end
 
     def add_instructeur
-      emails = params['emails'].presence || []
+      emails = params['emails'].presence || [].to_json
-      emails = emails.map(&:strip).map(&:downcase)
+      emails = JSON.parse(emails).map(&:strip).map(&:downcase)
 
       correct_emails, bad_emails = emails
         .partition { |email| URI::MailTo::EMAIL_REGEXP.match?(email) }

app/javascript/components/ComboMultipleDropdownList.js

@@ -0,0 +1,250 @@
+import React, {
+  useMemo,
+  useState,
+  useRef,
+  useContext,
+  createContext,
+  useEffect,
+  useLayoutEffect
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxList,
+  ComboboxOption,
+  ComboboxPopover
+} from '@reach/combobox';
+import '@reach/combobox/styles.css';
+import matchSorter from 'match-sorter';
+import { fire } from '@utils';
+
+const Context = createContext();
+
+function ComboMultipleDropdownList({
+  options,
+  hiddenFieldId,
+  selected,
+  label,
+  acceptNewValues = false
+}) {
+  if (label == undefined) {
+    label = 'Choisir une option';
+  }
+  if (Array.isArray(options[0]) == false) {
+    options = options.map((o) => [o, o]);
+  }
+  const inputRef = useRef();
+  const [term, setTerm] = useState('');
+  const [selections, setSelections] = useState(selected);
+  const [newValues, setNewValues] = useState([]);
+  const results = useMemo(
+    () =>
+      (term
+        ? matchSorter(
+            options.filter((o) => !o[0].startsWith('--')),
+            term
+          )
+        : options
+      ).filter((o) => o[0] && !selections.includes(o[1])),
+    [term, selections.join(',')]
+  );
+  const hiddenField = useMemo(
+    () => document.querySelector(`input[data-uuid="${hiddenFieldId}"]`),
+    [hiddenFieldId]
+  );
+
+  const handleChange = (event) => {
+    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) {
+      hiddenField.setAttribute('value', JSON.stringify(selections));
+      fire(hiddenField, 'autosave:trigger');
+    }
+  };
+
+  const onSelect = (value) => {
+    let sel = options.find((o) => o[0] == value)[1];
+    saveSelection([...selections, sel]);
+    setTerm('');
+  };
+
+  const onRemove = (value) => {
+    saveSelection(
+      selections.filter((s) =>
+        newValues.includes(value)
+          ? s != value
+          : s !== options.find((o) => o[0] == value)[1]
+      )
+    );
+    inputRef.current.focus();
+  };
+
+  return (
+    <Combobox openOnFocus={true} onSelect={onSelect} aria-label={label}>
+      <ComboboxTokenLabel onRemove={onRemove}>
+        <ul
+          aria-live="polite"
+          aria-atomic={true}
+          data-reach-combobox-token-list
+        >
+          {selections.map((selection) => (
+            <ComboboxToken
+              key={selection}
+              value={
+                newValues.find((newValue) => newValue == selection) ||
+                options.find((o) => o[1] == selection)[0]
+              }
+            />
+          ))}
+        </ul>
+        <ComboboxInput
+          ref={inputRef}
+          value={term}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          autocomplete={false}
+        />
+      </ComboboxTokenLabel>
+      {results && (
+        <ComboboxPopover portal={false}>
+          {results.length === 0 && (
+            <p>
+              Aucun résultat{' '}
+              <button
+                onClick={() => {
+                  setTerm('');
+                }}
+              >
+                Effacer
+              </button>
+            </p>
+          )}
+          <ComboboxList>
+            {results.map((value, index) => {
+              if (value[0].startsWith('--')) {
+                return <ComboboxSeparator key={index} value={value[0]} />;
+              }
+              return <ComboboxOption key={index} value={value[0]} />;
+            })}
+          </ComboboxList>
+        </ComboboxPopover>
+      )}
+    </Combobox>
+  );
+}
+
+function ComboboxTokenLabel({ onRemove, ...props }) {
+  const selectionsRef = useRef([]);
+
+  useLayoutEffect(() => {
+    selectionsRef.current = [];
+    return () => (selectionsRef.current = []);
+  });
+
+  const context = {
+    onRemove,
+    selectionsRef
+  };
+
+  return (
+    <Context.Provider value={context}>
+      <div data-combobox-token-label {...props} />
+    </Context.Provider>
+  );
+}
+
+ComboboxTokenLabel.propTypes = {
+  onRemove: PropTypes.func
+};
+
+function ComboboxSeparator({ value }) {
+  return (
+    <li aria-disabled="true" role="option" data-combobox-separator>
+      {value.slice(2, -2)}
+    </li>
+  );
+}
+
+ComboboxSeparator.propTypes = {
+  value: PropTypes.string
+};
+
+function ComboboxToken({ value, ...props }) {
+  const { selectionsRef, onRemove } = useContext(Context);
+  useEffect(() => {
+    selectionsRef.current.push(value);
+  });
+
+  return (
+    <li
+      data-reach-combobox-token
+      tabIndex="0"
+      onKeyDown={(event) => {
+        if (event.key === 'Backspace') {
+          onRemove(value);
+        }
+      }}
+      {...props}
+    >
+      <span
+        role="presentation"
+        data-combobox-remove-token
+        onClick={() => {
+          onRemove(value);
+        }}
+      >
+        x
+      </span>
+      {value}
+    </li>
+  );
+}
+
+ComboboxToken.propTypes = {
+  value: PropTypes.string,
+  label: PropTypes.string
+};
+
+ComboMultipleDropdownList.propTypes = {
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(
+      PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+      )
+    )
+  ]),
+  hiddenFieldId: PropTypes.string,
+  selected: PropTypes.arrayOf(PropTypes.string),
+  arraySelected: PropTypes.arrayOf(PropTypes.array),
+  label: PropTypes.string,
+  acceptNewValues: PropTypes.bool
+};
+
+export default ComboMultipleDropdownList;

app/javascript/loaders/ComboMultipleDropdownList.js

@@ -0,0 +1,5 @@
+import Loadable from '../components/Loadable';
+
+export default Loadable(() =>
+  import('../components/ComboMultipleDropdownList')
+);

app/javascript/new_design/select2.js

@@ -1,80 +0,0 @@
-import $ from 'jquery';
-import 'select2';
-
-const language = {
-  errorLoading: function () {
-    return 'Les résultats ne peuvent pas être chargés.';
-  },
-  inputTooLong: function (args) {
-    var overChars = args.input.length - args.maximum;
-
-    return 'Supprimez ' + overChars + ' caractère' + (overChars > 1 ? 's' : '');
-  },
-  inputTooShort: function (args) {
-    var remainingChars = args.minimum - args.input.length;
-
-    return (
-      'Saisissez au moins ' +
-      remainingChars +
-      ' caractère' +
-      (remainingChars > 1 ? 's' : '')
-    );
-  },
-  loadingMore: function () {
-    return 'Chargement de résultats supplémentaires…';
-  },
-  maximumSelected: function (args) {
-    return (
-      'Vous pouvez seulement sélectionner ' +
-      args.maximum +
-      ' élément' +
-      (args.maximum > 1 ? 's' : '')
-    );
-  },
-  noResults: function () {
-    return 'Aucun résultat trouvé';
-  },
-  searching: function () {
-    return 'Recherche en cours…';
-  },
-  removeAllItems: function () {
-    return 'Supprimer tous les éléments';
-  }
-};
-
-const baseOptions = {
-  language,
-  width: '100%'
-};
-
-const templateOption = ({ text }) =>
-  $(
-    `<span class="custom-select2-option"><span class="icon person"></span>${text}</span>`
-  );
-
-addEventListener('ds:page:update', () => {
-  $('select.select2').select2(baseOptions);
-
-  $('.columns-form select.select2-limited').select2({
-    width: '300px',
-    placeholder: 'Sélectionnez des colonnes',
-    maximumSelectionLength: '5'
-  });
-
-  $('.recipients-form select.select2-limited').select2({
-    language,
-    width: '300px',
-    placeholder: 'Sélectionnez des instructeurs',
-    maximumSelectionLength: '30'
-  });
-
-  $('select.select2-limited.select-instructeurs').select2({
-    language,
-    dropdownParent: $('.instructeur-wrapper'),
-    placeholder: 'Saisir l’adresse email de l’instructeur',
-    tags: true,
-    tokenSeparators: [',', ' '],
-    templateResult: templateOption,
-    templateSelection: templateOption
-  });
-});

app/javascript/packs/application.js

@@ -17,7 +17,6 @@ import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';
 import '../new_design/procedure-form';
-import '../new_design/select2';
 import '../new_design/spinner';
 import '../new_design/support';
 import '../new_design/dossiers/auto-save';

app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml

@@ -8,9 +8,8 @@
     Le destinataire suivra automatiquement le dossier
   = form_for dossier, url: send_to_instructeurs_instructeur_dossier_path(dossier.procedure, dossier), method: :post, html: { class: 'form recipients-form' } do |f|
     .flex.justify-start.align-start
-      = select_tag(:recipients,
+      - hidden_field_id = SecureRandom.uuid
-        options_from_collection_for_select(potential_recipients, :id, :email),
+      = hidden_field_tag :recipients, nil, data: { uuid: hidden_field_id }
-        multiple: true,
+      = react_component("ComboMultipleDropdownList", options: potential_recipients.map{|r| [r.email, r.id]}, selected: [], disabled: [], hiddenFieldId: hidden_field_id, label: "email instructeur")
-        class: 'select2-limited',
+
-        placeholder: '')
       = f.submit "Envoyer", class: "button large send gap-left"

app/views/instructeurs/procedures/show.html.haml

@@ -122,10 +122,10 @@
                   Personnaliser
                 #custom-menu.dropdown-content.fade-in-down
                   = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form columns-form' do
-                    = select_tag :values,
+                    - hidden_field_id = SecureRandom.uuid
-                      options_for_select(@displayed_fields_options, selected: @displayed_fields_selected),
+                    = hidden_field_tag :values, nil, data: { uuid: hidden_field_id }
-                      multiple: true,
+                    = react_component("ComboMultipleDropdownList", options: @displayed_fields_options, selected: @displayed_fields_selected, disabled: [], hiddenFieldId: hidden_field_id, label: 'colonne')
-                      class: 'select2-limited'
+
                     = submit_tag "Enregistrer", class: 'button'
 
         %tbody

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

@@ -25,12 +25,15 @@
       .instructeur-wrapper
         - if !@procedure.routee?
           %p.notice Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
-        = select_tag :emails,
+        - hidden_field_id = SecureRandom.uuid
-          options_for_select(@available_instructeur_emails),
+        = hidden_field_tag :emails, nil, data: { uuid: hidden_field_id }
-          multiple: true,
+        = react_component("ComboMultipleDropdownList",
-          class: 'select-instructeurs select2-limited'
+          options: @available_instructeur_emails, selected: [], disabled: [],
+          hiddenFieldId: hidden_field_id,
+          label: 'email instructeur',
+          acceptNewValues: true)
 
-      = f.submit 'Affecter', class: 'button primary send'
+        = f.submit 'Affecter', class: 'button primary send'
 
     %table.table.mt-2
       %thead

app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml

@@ -7,10 +7,7 @@
           = b.text
 
   - else
-    = form.select :value,
+    - hidden_field_id = SecureRandom.uuid
-        champ.options,
+    = form.hidden_field :value, { data: { uuid: hidden_field_id } }
-        { selected: champ.selected_options,
+    = react_component("ComboMultipleDropdownList", options: champ.options, selected: champ.selected_options, disabled: champ.disabled_options, hiddenFieldId: hidden_field_id, label: champ.libelle)
-          disabled: champ.disabled_options },
-        multiple: true,
-        class: 'select2'
 

spec/controllers/instructeurs/dossiers_controller_spec.rb

@@ -38,7 +38,7 @@ describe Instructeurs::DossiersController, type: :controller do
       post(
         :send_to_instructeurs,
         params: {
-          recipients: [recipient],
+          recipients: [recipient.id].to_json,
           procedure_id: procedure.id,
           dossier_id: dossier.id
         }

spec/controllers/new_administrateur/groupe_instructeurs_controller_spec.rb

@@ -207,11 +207,11 @@ describe NewAdministrateur::GroupeInstructeursController, type: :controller do
 
   describe '#add_instructeur_procedure_non_routee' do
     let(:procedure) { create :procedure, administrateur: admin }
-    let(:emails) { ['instructeur_3@ministere_a.gouv.fr', 'instructeur_4@ministere_b.gouv.fr'] }
+    let(:emails) { ['instructeur_3@ministere_a.gouv.fr', 'instructeur_4@ministere_b.gouv.fr'].to_json }
     subject { post :add_instructeur, params: { emails: emails, procedure_id: procedure.id, id: gi_1_1.id } }
 
     context 'when all emails are valid' do
-      let(:emails) { ['test@b.gouv.fr', 'test2@b.gouv.fr'] }
+      let(:emails) { ['test@b.gouv.fr', 'test2@b.gouv.fr'].to_json }
       it { expect(response.status).to eq(200) }
       it { expect(subject.request.flash[:alert]).to be_nil }
       it { expect(subject.request.flash[:notice]).to be_present }
@@ -219,7 +219,7 @@ describe NewAdministrateur::GroupeInstructeursController, type: :controller do
     end
 
     context 'when there is at least one bad email' do
-      let(:emails) { ['badmail', 'instructeur2@gmail.com'] }
+      let(:emails) { ['badmail', 'instructeur2@gmail.com'].to_json }
       it { expect(response.status).to eq(200) }
       it { expect(subject.request.flash[:alert]).to be_present }
       it { expect(subject.request.flash[:notice]).to be_present }
@@ -227,7 +227,7 @@ describe NewAdministrateur::GroupeInstructeursController, type: :controller do
     end
 
     context 'when the admin wants to assign an instructor who is already assigned on this procedure' do
-      let(:emails) { ['instructeur_1@ministere_a.gouv.fr'] }
+      let(:emails) { ['instructeur_1@ministere_a.gouv.fr'].to_json }
       it { expect(subject.request.flash[:alert]).to be_present }
       it { expect(subject).to redirect_to admin_procedure_groupe_instructeur_path(procedure, procedure.defaut_groupe_instructeur) }
     end
@@ -247,7 +247,7 @@ describe NewAdministrateur::GroupeInstructeursController, type: :controller do
         params: {
           procedure_id: procedure.id,
           id: gi_1_2.id,
-          emails: new_instructeur_emails
+          emails: new_instructeur_emails.to_json
         }
     end
 
@@ -281,7 +281,7 @@ describe NewAdministrateur::GroupeInstructeursController, type: :controller do
     end
 
     context 'of an empty string' do
-      let(:new_instructeur_emails) { '' }
+      let(:new_instructeur_emails) { [''] }
 
       it { expect(response).to redirect_to(admin_procedure_groupe_instructeur_path(procedure, gi_1_2)) }
     end

spec/features/instructeurs/instruction_spec.rb

@@ -128,10 +128,8 @@ feature 'Instructing a dossier:' do
 
     click_on 'Personnes impliquées'
 
-    first('.select2-container', minimum: 1).click
+    select_multi('email instructeur', instructeur_2.email)
-    find('li.select2-results__option[role="option"]', text: instructeur_2.email).click
+    select_multi('email instructeur', instructeur_3.email)
-    first('.select2-container', minimum: 1).click
-    find('li.select2-results__option[role="option"]', text: instructeur_3.email).click
 
     click_on 'Envoyer'
 

spec/features/instructeurs/procedure_filters_spec.rb

@@ -125,15 +125,13 @@ feature "procedure filters" do
 
   def add_column(column_name)
     click_on 'Personnaliser'
-    find("span.select2-container").click
+    select_multi('colonne', column_name)
-    find(:xpath, "//li[text()='#{column_name}']").click
     click_button "Enregistrer"
   end
 
   def remove_column(column_name)
     click_on 'Personnaliser'
-    find(:xpath, "//li[contains(@title, '#{column_name}')]/span[contains(text(), '×')]").click
+    find(:xpath, "//li[contains(text(), '#{column_name}')]/span[contains(text(), 'x')]").click
-    find(:xpath, "//form[contains(@class, 'columns-form')]//span[contains(@class, 'select2-container')]").click
     click_button "Enregistrer"
   end
 end

spec/features/routing/full_scenario_spec.rb

@@ -30,14 +30,14 @@ 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)
     perform_enqueued_jobs { click_on 'Affecter' }
     expect(page).to have_text("Les instructeurs ont bien été affectés à la démarche")
 
     victor = User.find_by(email: 'victor@inst.com').instructeur
 
     # add superwoman to littéraire groupe
-    find('input.select2-search__field').send_keys('superwoman@inst.com', :enter)
+    find("input[aria-label='email instructeur'").send_keys('superwoman@inst.com', :enter)
     perform_enqueued_jobs { click_on 'Affecter' }
     expect(page).to have_text("Les instructeurs ont bien été affectés à la démarche")
 
@@ -50,14 +50,14 @@ feature 'The routing', js: true do
     expect(page).to have_text('Le groupe d’instructeurs « scientifique » a été créé.')
 
     # add marie to scientifique groupe
-    find('input.select2-search__field').send_keys('marie@inst.com', :enter)
+    find("input[aria-label='email instructeur'").send_keys('marie@inst.com', :enter)
     perform_enqueued_jobs { click_on 'Affecter' }
     expect(page).to have_text("L’instructeur marie@inst.com a été affecté")
 
     marie = User.find_by(email: 'marie@inst.com').instructeur
 
     # add superwoman to scientifique groupe
-    find('input.select2-search__field').send_keys('superwoman@inst.com', :enter)
+    find("input[aria-label='email instructeur'").send_keys('superwoman@inst.com', :enter)
     perform_enqueued_jobs { click_on 'Affecter' }
     expect(page).to have_text("L’instructeur superwoman@inst.com a été affecté")
 

spec/features/users/brouillon_spec.rb

@@ -25,8 +25,9 @@ feature 'The user' do
     check('val1')
     check('val3')
     select('bravo', from: form_id_for('simple_choice_drop_down_list_long'))
-    select('alpha', from: form_id_for('multiple_choice_drop_down_list_long'))
+    select_multi('multiple_choice_drop_down_list_long', 'alpha')
-    select('charly', from: form_id_for('multiple_choice_drop_down_list_long'))
+    select_multi('multiple_choice_drop_down_list_long', 'charly')
+
     select_champ_geo('pays', 'aust', 'AUSTRALIE')
 
     select_champ_geo('regions', 'Ma', 'Martinique')
@@ -83,7 +84,7 @@ feature 'The user' do
     expect(page).to have_checked_field('val1')
     expect(page).to have_checked_field('val3')
     expect(page).to have_selected_value('simple_choice_drop_down_list_long', selected: 'bravo')
-    expect(page).to have_selected_value('multiple_choice_drop_down_list_long', selected: ['alpha', 'charly'])
+    check_selected_values('multiple_choice_drop_down_list_long', ['alpha', 'charly'])
     expect(page).to have_hidden_field('pays', with: 'AUSTRALIE')
     expect(page).to have_hidden_field('regions', with: 'Martinique')
     expect(page).to have_hidden_field('departements', with: '02 - Aisne')

spec/support/feature_helpers.rb

@@ -103,6 +103,25 @@ module FeatureHelpers
     end
   end
 
+  def select_multi(champ, with)
+    input = find("input[aria-label='#{champ}'")
+    input.click
+
+    # hack because for unknown reason, the click on input doesn't show combobox-popover with selenium driver
+    script = "document.evaluate(\"//input[@aria-label='#{champ}']//ancestor::div[@data-reach-combobox]/div[@data-reach-combobox-popover]\", document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null).iterateNext().removeAttribute(\"hidden\")"
+    execute_script(script)
+
+    element = find(:xpath, "//input[@aria-label='#{champ}']/ancestor::div[@data-reach-combobox]//div[@data-reach-combobox-popover]//li/span[normalize-space(text())='#{with}']")
+    element.click
+  end
+
+  def check_selected_values(champ, values)
+    combobox = find(:xpath, "//input[@aria-label='#{champ}']/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
+    hiddenFieldId = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
+    hiddenField = find("input[data-uuid='#{hiddenFieldId}']")
+    expect(values.sort).to eq(JSON.parse(hiddenField.value).sort)
+  end
+
   # Keep the brower window open after a test success of failure, to
   # allow inspecting the page or the console.
   #

spec/views/instructeur/dossiers/_envoyer_dossier_block.html.haml_spec.rb

@@ -13,7 +13,7 @@ describe 'instructeurs/dossiers/envoyer_dossier_block.html.haml', type: :view do
     let(:instructeur) { create(:instructeur, email: 'yop@totomail.fr') }
     let(:potential_recipients) { [instructeur] }
 
-    it { is_expected.to have_css("select > option[value='#{instructeur.id}']") }
+    it { is_expected.to match(/data-react-props.*#{instructeur.email}/) }
     it { is_expected.to have_css(".button.send") }
   end
 

spec/views/shared/dossiers/_edit.html.haml_spec.rb

@@ -82,7 +82,7 @@ describe 'shared/dossiers/edit.html.haml', type: :view do
       let(:type_de_champ) { create(:type_de_champ_multiple_drop_down_list, :long, procedure: dossier.procedure) }
 
       it 'renders the list as a multiple-selection dropdown' do
-        expect(subject).to have_selector('select.select2')
+        expect(subject).to have_selector('[data-react-class="ComboMultipleDropdownList"]')
       end
     end
   end