From 65dffd0e19d240a0d18460da9eda95cdaeabdbde Mon Sep 17 00:00:00 2001
From: Paul Chavard <pro@paul.chavard.net>
Date: Tue, 23 Jul 2024 18:06:32 +0200
Subject: [PATCH] feat(combobox): improve style and menu trigger mode

---
 app/javascript/components/ComboBox.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/javascript/components/ComboBox.tsx b/app/javascript/components/ComboBox.tsx
index 10d184497..75a160df4 100644
--- a/app/javascript/components/ComboBox.tsx
+++ b/app/javascript/components/ComboBox.tsx
@@ -48,7 +48,6 @@ export function ComboBox({
     <AriaComboBox
       {...props}
       className={`fr-ds-combobox ${className ?? ''}`}
-      menuTrigger="focus"
       shouldFocusWrap={true}
     >
       {label ? <Label className="fr-label">{label}</Label> : null}
@@ -114,7 +113,12 @@ export function SingleComboBox({
 
   return (
     <>
-      <ComboBox aria-labelledby={labelledby} {...comboBoxProps} {...props}>
+      <ComboBox
+        aria-labelledby={labelledby}
+        menuTrigger="focus"
+        {...comboBoxProps}
+        {...props}
+      >
         {(item) => <ComboBoxItem id={item.value}>{item.label}</ComboBoxItem>}
       </ComboBox>
       {children || name ? (
@@ -184,7 +188,7 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
                 key={item.value}
                 id={item.value}
                 textValue={`Retirer ${item.label}`}
-                className="fr-tag fr-tag--sm"
+                className="fr-tag fr-tag--sm fr-tag--dismiss"
               >
                 {item.label}
                 <Button slot="remove" className="fr-tag--dismiss"></Button>
@@ -197,6 +201,7 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
         aria-labelledby={labelledby}
         allowsCustomValue={allowsCustomValue}
         inputRef={inputRef}
+        menuTrigger="focus"
         {...comboBoxProps}
         {...props}
       >