ETQ Usager, je veux trouver ma commune qui est trop bas dans la liste des résultats

app/components/dsfr/combobox_component.rb

@@ -1,9 +1,9 @@
 class Dsfr::ComboboxComponent < ApplicationComponent
-  def initialize(form: nil, options: nil, url: nil, selected: nil, allows_custom_value: false, input_html_options: {}, hidden_html_options: {})
-    @form, @options, @url, @selected, @allows_custom_value, @input_html_options, @hidden_html_options = form, options, url, selected, allows_custom_value, input_html_options, hidden_html_options
+  def initialize(form: nil, options: nil, url: nil, selected: nil, allows_custom_value: false, limit: nil, input_html_options: {}, hidden_html_options: {})
+    @form, @options, @url, @selected, @allows_custom_value, @limit, @input_html_options, @hidden_html_options = form, options, url, selected, allows_custom_value, limit, input_html_options, hidden_html_options
   end
 
-  attr_reader :form, :options, :url, :selected, :allows_custom_value
+  attr_reader :form, :options, :url, :selected, :allows_custom_value, :limit
 
   private
 

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

@@ -1,4 +1,4 @@
-.fr-ds-combobox{ data: { controller: 'combobox', allows_custom_value: allows_custom_value } }
+.fr-ds-combobox{ data: { controller: 'combobox', allows_custom_value: allows_custom_value, limit: limit } }
   .fr-ds-combobox-input
     %input{ value: selected_option_label_input_value, **html_input_options }
   - if form

app/components/editable_champ/communes_component/communes_component.html.haml

@@ -1,2 +1,2 @@
-= render Dsfr::ComboboxComponent.new form: @form, url: data_sources_data_source_commune_path, selected: [@champ.to_s, @champ.selected], input_html_options: { name: :external_id, id: @champ.input_id, class: 'fr-select', describedby: @champ.describedby_id } do
+= render Dsfr::ComboboxComponent.new form: @form, url: data_sources_data_source_commune_path, selected: [@champ.to_s, @champ.selected], limit: 20, input_html_options: { name: :external_id, id: @champ.input_id, class: 'fr-select', describedby: @champ.describedby_id } do
   = @form.hidden_field :code_postal, data: { value_slot: 'data:string' }

app/controllers/data_sources/commune_controller.rb

@@ -30,7 +30,7 @@ def fetch_by_name(name)
       type: 'commune-actuelle,arrondissement-municipal',
       nom: name,
       boost: 'population',
-      limit: 20
+      limit: 100
     })
   end
 
@@ -39,7 +39,7 @@ def fetch_by_postal_code(postal_code)
       type: 'commune-actuelle,arrondissement-municipal',
       codePostal: postal_code,
       boost: 'population',
-      limit: 10
+      limit: 20
     })
   end
 

app/javascript/controllers/combobox_controller.ts

@@ -23,6 +23,9 @@ export class ComboboxController extends ApplicationController {
       item,
       hint,
       allowsCustomValue: this.element.hasAttribute('data-allows-custom-value'),
+      limit: this.element.hasAttribute('data-limit')
+        ? Number(this.element.getAttribute('data-limit'))
+        : undefined,
       getHintText: (hint) => getHintText(hints, hint)
     });
     this.#combobox.init();

app/javascript/shared/combobox-ui.ts

@@ -21,6 +21,7 @@ export type ComboboxUIOptions = {
   item: HTMLTemplateElement;
   valueSlots?: HTMLInputElement[] | NodeListOf<HTMLInputElement>;
   allowsCustomValue?: boolean;
+  limit?: number;
   hint?: HTMLElement;
   getHintText?: (hint: Hint) => string;
 };
@@ -41,6 +42,7 @@ export class ComboboxUI implements EventListenerObject {
 
   #getHintText = defaultGetHintText;
   #allowsCustomValue: boolean;
+  #limit?: number;
 
   constructor({
     input,
@@ -50,7 +52,8 @@ export class ComboboxUI implements EventListenerObject {
     item,
     hint,
     getHintText,
-    allowsCustomValue
+    allowsCustomValue,
+    limit
   }: ComboboxUIOptions) {
     this.#input = input;
     this.#selectedValueInput = selectedValueInput;
@@ -60,6 +63,7 @@ export class ComboboxUI implements EventListenerObject {
     this.#hint = hint;
     this.#getHintText = getHintText ?? defaultGetHintText;
     this.#allowsCustomValue = allowsCustomValue ?? false;
+    this.#limit = limit;
   }
 
   init() {
@@ -75,6 +79,7 @@ export class ComboboxUI implements EventListenerObject {
         options: fetcher,
         selected,
         allowsCustomValue: this.#allowsCustomValue,
+        limit: this.#limit,
         render: (state) => this.render(state)
       });
     } else {
@@ -92,6 +97,7 @@ export class ComboboxUI implements EventListenerObject {
         options,
         selected,
         allowsCustomValue: this.#allowsCustomValue,
+        limit: this.#limit,
         render: (state) => this.render(state)
       });
     }

app/javascript/shared/combobox.ts

@@ -37,6 +37,7 @@ export type Fetcher = (
 
 export class Combobox {
   #allowsCustomValue = false;
+  #limit?: number;
   #open = false;
   #inputValue = '';
   #selectedOption: Option | null = null;
@@ -51,14 +52,17 @@ export class Combobox {
     options,
     selected,
     allowsCustomValue,
+    limit,
     render
   }: {
     options: Option[] | Fetcher;
     selected: Option | null;
     allowsCustomValue?: boolean;
+    limit?: number;
     render: (state: State) => void;
   }) {
     this.#allowsCustomValue = allowsCustomValue ?? false;
+    this.#limit = limit;
     this.#options = Array.isArray(options) ? options : [];
     this.#fetcher = Array.isArray(options) ? null : options;
     this.#selectedOption = selected;
@@ -135,12 +139,12 @@ export class Combobox {
       this._render(Action.Update);
 
       this.#selectedOption = null;
-      this.#visibleOptions = this.#options;
     } else {
       this.#selectedOption = null;
-      this.#visibleOptions = this._filterOptions();
     }
 
+    this.#visibleOptions = this._filterOptions();
+
     if (this.#visibleOptions.length > 0) {
       if (!this.#open) {
         this.open();
@@ -235,11 +239,18 @@ export class Combobox {
   }
 
   private _filterOptions(): Option[] {
-    if (!this.#inputValue || this.#inputValue == this.#selectedOption?.value) {
-      return this.#options;
+    const emptyOrSelected =
+      !this.#inputValue || this.#inputValue == this.#selectedOption?.value;
+    const options = emptyOrSelected
+      ? this.#options
+      : matchSorter(this.#options, this.#inputValue, {
+          keys: ['label']
+        });
+
+    if (this.#limit) {
+      return options.slice(0, this.#limit);
     }
-
-    return matchSorter(this.#options, this.#inputValue, { keys: ['label'] });
+    return options;
   }
 
   private get _focusedOptionIndex(): number {