rend accessible la selection multiple usager

en remplaçant select2 par ComboMultipleDropdownList

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/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/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