Merge pull request #9820 from mfo/US/filter-dossier-with-combobox

ETQ instructeur, lorsque je veux filtrer les dossiers d'une démarche, je peux utiliser un autocomplete

app/components/dossiers/instructeur_filter_component/instructeur_filter_component.html.haml

@@ -1,7 +1,7 @@
 = form_tag add_filter_instructeur_procedure_path(procedure), method: :post, class: 'dropdown-form large', id: 'filter-component', data: { turbo: true, controller: 'autosubmit' } do
   .fr-select-group
-    = label_tag :field,  t('.column'), class: 'fr-label fr-m-0'
+    = label_tag :field,  t('.column'), class: 'fr-label fr-m-0', id: 'instructeur-filter-combo-label', for: 'search-filter'
-    = select_tag :field, options_for_select(filterable_fields_for_select, field_id), include_blank: field_id.nil?, class: 'fr-select'
+    = render Dsfr::ComboboxComponent.new form: nil, name: :field, options: filterable_fields_for_select, selected: field_id, id: 'search-filter', class: 'fr-select', describedby: 'instructeur-filter-combo-label', allows_custom_value: false, allows_blank: false, form_id: 'filter-component', data: { no_autosubmit: ['input', 'blur'].join(' '), no_autosubmit_on_empty: "true" }
 
     %input.hidden{ type: 'submit', formaction: update_filter_instructeur_procedure_path(procedure), data: { autosubmit_target: 'submitter' } }
 

app/components/dsfr/combobox_component.rb

@@ -23,6 +23,7 @@ class Dsfr::ComboboxComponent < ApplicationComponent
       id: input_id,
       class: input_class,
       role: 'combobox',
+      data: @html_options[:data],
       'aria-expanded': 'false',
       'aria-describedby': @html_options[:describedby]
     }.compact

app/components/dsfr/combobox_component/combobox_component.html.haml

@@ -2,9 +2,9 @@
   .fr-ds-combobox-input
     %input{ value: selected_option_label_input_value, **html_input_options }
   - if form
-    = form.hidden_field name, value: selected_option_value_input_value, form: form_id
+    = form.hidden_field name, value: selected_option_value_input_value, form: form_id, data: html_input_options[:data]
   - else
-    %input{ type: 'hidden', name:, value: selected_option_value_input_value, form: form_id }
+    %input{ type: 'hidden', name: name, value: selected_option_value_input_value, form: form_id, data: html_input_options[:data] }
   .fr-menu
     %ul.fr-menu__list.hidden{ role: 'listbox', hidden: true, id: list_id, data: { turbo_force: :browser, options: options_json, url:, hints: hints_json }.compact }
   .sr-only{ aria: { live: 'polite', atomic: 'true' }, data: { turbo_force: :browser } }

app/javascript/controllers/autosubmit_controller.ts

@@ -34,7 +34,8 @@ export class AutosubmitController extends ApplicationController {
         }
       },
       text: () => this.submitNow(),
-      changeable: () => this.submitNow()
+      changeable: () => this.submitNow(),
+      hidden: () => this.submitNow()
     });
   }
 
@@ -75,12 +76,19 @@ export class AutosubmitController extends ApplicationController {
   }
 
   private preventAutosubmit(
-    target: HTMLElement & { disabled?: boolean },
+    target: HTMLElement & { disabled?: boolean } & { value?: string },
     type: string
   ) {
     if (target.disabled) {
       return true;
     }
+    if (
+      Boolean(target.getAttribute('data-no-autosubmit-on-empty')) &&
+      target.value == ''
+    ) {
+      return true;
+    }
+
     const noAutosubmit = this.parseNoAutosubmit(
       target.getAttribute('data-no-autosubmit')
     );

spec/support/system_helpers.rb

@@ -108,7 +108,7 @@ module SystemHelpers
 
   def select_combobox(libelle, fill_with, value, check: true)
     fill_in libelle, with: fill_with
-    find('li[role="option"]', text: value, wait: 5).click
+    find('li[role="option"][data-reach-combobox-option]', text: value, wait: 5).click
     if check
       check_selected_value(libelle, with: value)
     end

spec/system/instructeurs/procedure_filters_spec.rb

@@ -89,23 +89,29 @@ describe "procedure filters" do
   scenario "should be able to user custom fiters", js: true do
     # use date filter
     click_on 'Sélectionner un filtre'
-    select "En construction le", from: "Colonne"
+    wait_until { all("#search-filter").size == 1 }
+    find('#search-filter', wait: 5).click
+    find('.fr-menu__item', text: "En construction le", wait: 5).click
     find("input#value[type=date]", visible: true)
     fill_in "Valeur", with: "10/10/2010"
     click_button "Ajouter le filtre"
-    expect(page).to have_no_css("select#field", visible: true)
+    expect(page).to have_no_css("#search-filter", visible: true)
 
     # use statut dropdown filter
     click_on 'Sélectionner un filtre'
-    select "Statut", from: "Colonne"
+    wait_until { all("#search-filter").size == 1 }
+    find('#search-filter', wait: 5).click
+    find('.fr-menu__item', text: "Statut", wait: 5).click
     find("select#value", visible: false)
     select 'En construction', from: "Valeur"
     click_button "Ajouter le filtre"
-    expect(page).to have_no_css("select#field", visible: true)
+    expect(page).to have_no_css("#search-filter", visible: true)
 
     # use choice dropdown filter
     click_on 'Sélectionner un filtre'
-    select "Choix unique", from: "Colonne"
+    wait_until { all("#search-filter").size == 1 }
+    find('#search-filter', wait: 5).click
+    find('.fr-menu__item', text: "Choix unique", wait: 5).click
     find("select#value", visible: false)
     select 'val1', from: "Valeur"
     click_button "Ajouter le filtre"
@@ -119,7 +125,9 @@ describe "procedure filters" do
       champ_select_value = "#{departement_champ.external_id} – #{departement_champ.value}"
 
       click_on 'Sélectionner un filtre'
-      select departement_champ.libelle, from: "Colonne"
+      wait_until { all("#search-filter").size == 1 }
+      find('#search-filter', wait: 5).click
+      find('.fr-menu__item', text: departement_champ.libelle, wait: 5).click
       find("select#value", visible: true)
       select champ_select_value, from: "Valeur"
       click_button "Ajouter le filtre"
@@ -133,7 +141,9 @@ describe "procedure filters" do
       region_champ.reload
 
       click_on 'Sélectionner un filtre'
-      select region_champ.libelle, from: "Colonne"
+      wait_until { all("#search-filter").size == 1 }
+      find('#search-filter', wait: 5).click
+      find('.fr-menu__item', text: region_champ.libelle, wait: 5).click
       find("select#value", visible: true)
       select region_champ.value, from: "Valeur"
       click_button "Ajouter le filtre"
@@ -181,18 +191,22 @@ describe "procedure filters" do
 
   def add_filter(column_name, filter_value)
     click_on 'Sélectionner un filtre'
-    select column_name, from: "Colonne"
+    wait_until { all("#search-filter").size == 1 }
+    find('#search-filter', wait: 5).click
+    find('.fr-menu__item', text: column_name, wait: 5).click
     fill_in "Valeur", with: filter_value
     click_button "Ajouter le filtre"
-    expect(page).to have_no_css("select#field", visible: true)
+    expect(page).to have_no_css("#search-filter", visible: true)
   end
 
   def add_enum_filter(column_name, filter_value)
     click_on 'Sélectionner un filtre'
-    select column_name, from: "Colonne"
+    wait_until { all("#search-filter").size == 1 }
+    find('#search-filter', wait: 5).click
+    find('.fr-menu__item', text: column_name, wait: 5).click
     select filter_value, from: "Valeur"
     click_button "Ajouter le filtre"
-    expect(page).to have_no_css("select#field", visible: true)
+    expect(page).to have_no_css("#search-filter", visible: true)
   end
 
   def add_column(column_name)