Improuve ComboMultipleDropdownList style

app/assets/stylesheets/forms.scss

@@ -176,7 +176,7 @@
     margin-bottom: $default-fields-spacer;
 
     &.small-margin {
-      margin-bottom: $default-padding / 2;
+      margin-bottom: $default-spacer;
     }
   }
 
@@ -186,7 +186,7 @@
 
   input[type=checkbox] {
     &.small-margin {
-      margin-bottom: $default-padding / 2;
+      margin-bottom: $default-spacer;
     }
   }
 
@@ -203,7 +203,7 @@
     padding: $default-padding;
 
     &.small {
-      padding: $default-padding / 2;
+      padding: $default-spacer;
     }
 
     &:disabled {
@@ -292,12 +292,13 @@
 
 
   [data-reach-combobox-input] {
-    padding: 16px;
     width: 100%;
     min-width: 50%;
     max-width: 100%;
     min-height: 62px;
-    margin-bottom: 40px;
+    border-radius: 4px;
+    border: solid 1px $border-grey;
+    padding: $default-padding;
   }
 
   [data-reach-combobox-input]:focus {
@@ -305,25 +306,31 @@
   }
 
   [data-reach-combobox-token-list] {
-    padding: $default-padding;
+    padding: $default-spacer;
     display: flex;
+    align-items: center;
+    list-style: none;
   }
 
   [data-reach-combobox-token] {
     border: solid 1px $border-grey;
     color: $black;
-    margin-top: $default-padding;
-    margin-bottom: $default-padding;
-    margin-right: 0.5 * $default-padding;
     border-radius: 4px;
-    padding: $default-padding;
+    padding: $default-spacer;
+    margin-right: $default-spacer;
     cursor: pointer;
-    list-style: none;
+    display: flex;
+    align-items: center;
   }
 
   [data-reach-combobox-token]:focus {
     background-color: $black;
     color: $white;
+
+    [data-combobox-remove-token] {
+      background-color: $black;
+      color: $white;
+    }
   }
 
   .editable-champ {
@@ -388,7 +395,7 @@
 
   .explication {
     margin-bottom: $default-fields-spacer;
-    padding: $default-padding / 2;
+    padding: $default-spacer;
     background-color: $light-grey;
 
     p:not(:last-child) {
@@ -467,23 +474,26 @@
   }
 }
 
+[data-react-class]:not([data-react-class="ComboMultipleDropdownList"]) {
+  [data-reach-combobox-input] {
+    margin-bottom: $default-fields-spacer;
+  }
+}
+
 [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;
+    border-radius: 4px;
+    border: solid 1px $border-grey;
+    padding: $default-padding;
+    margin: $default-spacer;
+    margin-top: 0;
   }
 }
 
@@ -507,15 +517,26 @@
 [data-combobox-separator] {
   font-size: 16px;
   color: $dark-grey;
-  margin-top: 6px;
+  background: $light-grey;
+  padding: $default-spacer;
 }
 
 [data-combobox-remove-token] {
-  color: $dark-grey;
-  padding-right: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  background-image: none;
+  border: none;
+  line-height: 1;
+  padding: 0;
+  margin-right: 4px;
+  display: flex;
+  align-items: center !important;
 }
 
-
 [data-reach-combobox-input]:focus {
   outline-color: $light-blue;
 }
+
+[data-reach-combobox-popover] {
+  z-index: 20;
+}

app/assets/stylesheets/procedure_show.scss

@@ -79,24 +79,33 @@
       padding: 0.25 * $default-padding;
       cursor: pointer;
       list-style: none;
+      display: flex;
+      align-items: center;
     }
 
     [data-reach-combobox-token]:focus {
       background-color: $black;
       color: $white;
+
+      [data-combobox-remove-token] {
+        background-color: $black;
+        color: $white;
+      }
     }
 
 
     [data-reach-combobox-input] {
       outline: none;
-      border: none;
       flex-grow: 1;
-      margin: 0.25rem;
+      margin: $default-spacer;
+      padding: $default-spacer;
+      border-radius: 4px;
+      border: solid 1px $border-grey;
+      margin-top: 0;
     }
 
     [data-reach-combobox-input]:focus {
-      outline: solid;
-      outline-color: $light-blue;
+      border-color: $blue;
     }
   }
 }

app/javascript/components/ComboMultipleDropdownList.jsx

@@ -18,6 +18,7 @@ import {
 import '@reach/combobox/styles.css';
 import { matchSorter } from 'match-sorter';
 import { fire } from '@utils';
+import { XIcon } from '@heroicons/react/outline';
 
 const Context = createContext();
 
@@ -152,7 +153,7 @@ function ComboMultipleDropdownList({
         />
       </ComboboxTokenLabel>
       {results && (
-        <ComboboxPopover portal={false}>
+        <ComboboxPopover className="shadow-popup">
           {results.length === 0 && (
             <p>
               Aucun résultat{' '}
@@ -160,11 +161,17 @@ function ComboMultipleDropdownList({
             </p>
           )}
           <ComboboxList>
-            {results.map(([label], index) => {
+            {results.map(([label, value], index) => {
               if (label.startsWith('--')) {
                 return <ComboboxSeparator key={index} value={label} />;
               }
-              return <ComboboxOption key={index} value={label} />;
+              return (
+                <ComboboxOption
+                  key={index}
+                  value={label}
+                  data-option-value={value}
+                />
+              );
             })}
           </ComboboxList>
         </ComboboxPopover>
@@ -226,15 +233,17 @@ function ComboboxToken({ value, ...props }) {
       }}
       {...props}
     >
-      <span
-        role="presentation"
+      <button
+        type="button"
+        tabIndex={-1}
         data-combobox-remove-token
         onClick={() => {
           onRemove(value);
         }}
       >
-        x
-      </span>
+        <XIcon style={{ width: '15px', height: '15px' }} />
+        <span className="screen-reader-text">Désélectionner</span>
+      </button>
       {value}
     </li>
   );

app/javascript/new_design/dropdown.js

@@ -1,7 +1,7 @@
 import { delegate } from '@utils';
 
 delegate('click', 'body', (event) => {
-  if (!event.target.closest('.dropdown')) {
+  if (!event.target.closest('.dropdown, [data-reach-combobox-popover]')) {
     [...document.querySelectorAll('.dropdown')].forEach((element) => {
       const button = element.querySelector('.dropdown-button');
       button.setAttribute('aria-expanded', false);

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

@@ -121,7 +121,7 @@
                 %button.button.dropdown-button{ 'aria-expanded' => 'false', 'aria-controls' => 'custom-menu' }
                   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
+                  = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form large columns-form' do
                     - hidden_field_id = SecureRandom.uuid
                     = hidden_field_tag :values, nil, data: { uuid: hidden_field_id }
                     = react_component("ComboMultipleDropdownList", options: @displayed_fields_options, selected: @displayed_fields_selected, disabled: [], hiddenFieldId: hidden_field_id, label: 'colonne')

package.json

@@ -4,6 +4,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@heroicons/react": "^1.0.1",
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@rails/actiontext": "^6.0.3",
     "@rails/activestorage": "^6.0.3",

spec/features/instructeurs/instruction_spec.rb

@@ -130,8 +130,8 @@ feature 'Instructing a dossier:', js: true do
 
     click_on 'Personnes impliquées'
 
-    select_multi('email instructeur', instructeur_2.email)
-    select_multi('email instructeur', instructeur_3.email)
+    select_multi_combobox('email instructeur', instructeur_2.email, instructeur_2.id)
+    select_multi_combobox('email instructeur', instructeur_3.email, instructeur_3.id)
 
     click_on 'Envoyer'
 

spec/features/instructeurs/procedure_filters_spec.rb

@@ -32,7 +32,7 @@ feature "procedure filters" do
   end
 
   scenario "should add be able to add created_at column", js: true do
-    add_column("Créé le")
+    add_column("Créé le", "self/created_at")
     within ".dossiers-table" do
       expect(page).to have_link("Créé le")
       expect(page).to have_link(new_unfollow_dossier.created_at.strftime('%d/%m/%Y'))
@@ -40,7 +40,7 @@ feature "procedure filters" do
   end
 
   scenario "should add be able to add and remove custom type_de_champ column", js: true do
-    add_column(type_de_champ.libelle)
+    add_column(type_de_champ.libelle, "type_de_champ/#{type_de_champ.stable_id}")
     within ".dossiers-table" do
       expect(page).to have_link(type_de_champ.libelle)
       expect(page).to have_link(champ.value)
@@ -123,15 +123,16 @@ feature "procedure filters" do
     click_button "Ajouter le filtre"
   end
 
-  def add_column(column_name)
+  def add_column(column_name, column_path)
     click_on 'Personnaliser'
-    select_multi('colonne', column_name)
+    select_multi_combobox('colonne', column_name, column_path)
     click_button "Enregistrer"
   end
 
   def remove_column(column_name)
     click_on 'Personnaliser'
-    find(:xpath, "//li[contains(text(), '#{column_name}')]/span[contains(text(), 'x')]").click
+    find(:xpath, ".//li[contains(text(), \"#{column_name}\")]/button", text: 'Désélectionner').click
+    find("body").native.send_key("Escape")
     click_button "Enregistrer"
   end
 end

spec/features/users/brouillon_spec.rb

@@ -25,16 +25,13 @@ feature 'The user' do
     check('val1')
     check('val3')
     select('bravo', from: form_id_for('simple_choice_drop_down_list_long'))
-    select_multi('multiple_choice_drop_down_list_long', 'alpha')
-    select_multi('multiple_choice_drop_down_list_long', 'charly')
+    select_multi_combobox('multiple_choice_drop_down_list_long', 'alp', 'alpha')
+    select_multi_combobox('multiple_choice_drop_down_list_long', 'cha', 'charly')
 
-    select_champ_geo('pays', 'aust', 'AUSTRALIE')
-
-    select_champ_geo('regions', 'Ma', 'Martinique')
-
-    select_champ_geo('departements', 'Ai', '02 - Aisne')
-
-    select_champ_geo('communes', 'Ambl', 'Ambléon (01300)')
+    select_combobox('pays', 'aust', 'AUSTRALIE')
+    select_combobox('regions', 'Ma', 'Martinique')
+    select_combobox('departements', 'Ai', '02 - Aisne')
+    select_combobox('communes', 'Ambl', 'Ambléon (01300)')
 
     check('engagement')
     fill_in('dossier_link', with: '123')
@@ -320,10 +317,6 @@ feature 'The user' do
     e.sibling('.datetime').first('select')[:id][0..-4]
   end
 
-  def have_hidden_field(libelle, with:)
-    have_css("##{form_id_for(libelle)}[value=\"#{with}\"]")
-  end
-
   def champ_value_for(libelle)
     champs = user_dossier.champs
     champs.find { |c| c.libelle == libelle }.value
@@ -352,14 +345,4 @@ feature 'The user' do
     expect(page).to have_selected_value("#{field}_4i", selected: date.strftime('%H'))
     expect(page).to have_selected_value("#{field}_5i", selected: date.strftime('%M'))
   end
-
-  def select_champ_geo(champ, fill_with, value)
-    input = find("input[aria-label=#{champ}")
-    input.click
-    input.fill_in with: fill_with
-    selector = "li[data-option-value=\"#{value}\"]"
-    find(selector).click
-    expect(page).to have_css(selector)
-    expect(page).to have_hidden_field(champ, with: value)
-  end
 end

spec/support/feature_helpers.rb

@@ -103,23 +103,43 @@ module FeatureHelpers
     end
   end
 
-  def select_multi(champ, with)
-    input = find("input[aria-label='#{champ}'")
+  def select_combobox(champ, fill_with, value)
+    input = find("input[aria-label=\"#{champ}\"")
     input.click
+    input.fill_in with: fill_with
+    selector = "li[data-option-value=\"#{value}\"]"
+    find(selector).click
+    expect(page).to have_css(selector)
+    expect(page).to have_hidden_field(champ, with: value)
+  end
 
-    # 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
+  def select_multi_combobox(champ, fill_with, value)
+    input = find("input[aria-label=\"#{champ}\"")
+    input.click
+    input.fill_in with: fill_with
+    selector = "li[data-option-value=\"#{value}\"]"
+    find(selector).click
+    check_selected_value(champ, value)
   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)
+    combobox = find(:xpath, "//input[@aria-label=\"#{champ}\"]/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
+    hidden_field_id = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
+    hidden_field = find("input[data-uuid=\"#{hidden_field_id}\"]")
+    hidden_field_values = JSON.parse(hidden_field.value)
+    expect(values.sort).to eq(hidden_field_values.sort)
+  end
+
+  def check_selected_value(champ, value)
+    combobox = find(:xpath, "//input[@aria-label=\"#{champ}\"]/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
+    hidden_field_id = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
+    hidden_field = find("input[data-uuid=\"#{hidden_field_id}\"]")
+    hidden_field_values = JSON.parse(hidden_field.value)
+    expect(hidden_field_values).to include(value)
+  end
+
+  def have_hidden_field(libelle, with:)
+    have_css("##{form_id_for(libelle)}[value=\"#{with}\"]")
   end
 
   # Keep the brower window open after a test success of failure, to

yarn.lock

@@ -1031,6 +1031,11 @@
   dependencies:
     prop-types "^15.7.2"
 
+"@heroicons/react@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.1.tgz#66d25f6441920bd5c2146ea27fd33995885452dd"
+  integrity sha512-uikw2gKCmqnvjVxitecWfFLMOKyL9BTFcU4VM3hHj9OMwpkCr5Ke+MRMyY2/aQVmsYs4VTq7NCFX05MYwAHi3g==
+
 "@jest/types@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"