Merge pull request #10635 from tchak/improuve-combobox

feat(combobox): improve style and menu trigger mode

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

app/javascript/entrypoints/application.js

@@ -3,8 +3,8 @@ import Rails from '@rails/ujs';
 import * as ActiveStorage from '@rails/activestorage';
 import * as Turbo from '@hotwired/turbo';
 import { Application } from '@hotwired/stimulus';
-import '@gouvfr/dsfr/dist/dsfr.module.js';
 
+import '../shared/dsfr';
 import '../shared/activestorage/ujs';
 import '../shared/safari-11-empty-file-workaround';
 import '../shared/toggle-target';

app/javascript/shared/dsfr.ts

@@ -0,0 +1,17 @@
+import '@gouvfr/dsfr/dist/core/core.module';
+import '@gouvfr/dsfr/dist/scheme/scheme.module';
+
+import '@gouvfr/dsfr/dist/component/toggle/toggle.module';
+import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module';
+import '@gouvfr/dsfr/dist/component/modal/modal.module';
+import '@gouvfr/dsfr/dist/component/navigation/navigation.module';
+import '@gouvfr/dsfr/dist/component/segmented/segmented.module';
+import '@gouvfr/dsfr/dist/component/table/table.module';
+import '@gouvfr/dsfr/dist/component/tile/tile.module';
+import '@gouvfr/dsfr/dist/component/card/card.module';
+import '@gouvfr/dsfr/dist/component/header/header.module';
+import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.module';
+import '@gouvfr/dsfr/dist/component/password/password.module';
+import '@gouvfr/dsfr/dist/component/accordion/accordion.module';
+import '@gouvfr/dsfr/dist/component/tab/tab.module';
+import '@gouvfr/dsfr/dist/component/tooltip/tooltip.module';