Merge pull request #1131 from dnum-mi/feat/#1124-dsfr-select-with-optgroup

laruiss · web-flow · commit 3e1dff56bc92 · 2025-10-21T17:53:25.000+02:00
ajoute l'usage d'optgroup dans DsfrSelect
diff --git a/src/components/DsfrSelect/DsfrSelect.md b/src/components/DsfrSelect/DsfrSelect.md
@@ -18,6 +18,7 @@ La liste déroulante fournit une liste d’option parmi lesquelles l’utilisate
 | `required`               | `boolean`                                                                                   |                             |             | Indique si le select est obligatoire.                            |
 | `disabled`               | `boolean`                                                                                   |                             |             | Indique si le select est désactivé.                              |
 | `options`                | `(string \| undefined \| { value: string \| undefined, text: string disabled?: boolean})[]` | `[]`                        |             | Options à sélectionner                                           |
+| `optionGroups`           | ` ({ label: string, options: (DsfrSelectOption \| { value: DsfrSelectOption, text: string, disabled?: boolean })[], disabled?: boolean })[] `| `[]` |   | Groupes d'options |
 | `label`                  | `string`                                                                                    | `''`                        |             | Texte du label associé au select.                                |
 | `name`                   | `string`                                                                                    |                             |             | Nom du champ.                                                    |
 | `description` deprecated | `string`                                                                                    |                             |             | Deprecated, utiliser hint plutôt.                                |
diff --git a/src/components/DsfrSelect/DsfrSelect.spec.ts b/src/components/DsfrSelect/DsfrSelect.spec.ts
@@ -90,4 +90,56 @@ describe('DsfrSelect', () => {
       expect(element.disabled).toBe(activeState)
     })
   })
+  it('should render optgroup', async () => {
+    const optionGroups = [
+      {
+        label: 'groupe 1',
+        disabled: true,
+        options: [
+          { value: 'Value 1', text: 'Text 1' },
+          { value: 'Value 2', text: 'Text 2' },
+        ],
+      },
+      {
+        label: 'groupe 2',
+        options: [
+          { value: 'Value 3', text: 'Text 3' },
+          { value: 'Value 4', text: 'Text 4', disabled: true },
+          { value: 'Value 5', text: 'Text 5' },
+        ],
+      },
+    ]
+    const selectId = 'select-id'
+    const { container, getByText } = render(DsfrSelect, {
+      props: {
+        optionGroups,
+        modelValue: undefined,
+        selectId,
+      },
+    })
+    const selectEl = container.querySelector('select')
+    console.log(selectEl?.innerHTML) // eslint-disable-line no-console
+
+    const optGroupEls = selectEl.querySelectorAll('optgroup')
+    const optionEl1 = getByText('Text 1')
+    const optionEl2 = getByText('Text 2')
+    const optionEl3 = getByText('Text 3')
+    const optionEl4 = getByText('Text 4')
+
+    expect(optGroupEls[0].disabled).toBe(true)
+    expect(optGroupEls[0].ariaDisabled).toBe('true')
+
+    expect(optionEl1?.ariaDisabled).toBe('true')
+    expect(optionEl2?.ariaDisabled).toBe('true')
+
+    expect(optGroupEls[1].disabled).toBe(false)
+    expect(optGroupEls[1].ariaDisabled).toBe('false')
+
+    expect(optionEl3?.ariaDisabled).toBe('false')
+    expect(optionEl4?.ariaDisabled).toBe('true')
+    expect(optionEl4.disabled).toBe(true)
+
+    console.log(optGroupEls[0]?.ariaDisabled) // eslint-disable-line no-console
+    console.log(optionEl1?.ariaDisabled) // eslint-disable-line no-console
+  })
 })
diff --git a/src/components/DsfrSelect/DsfrSelect.stories.ts b/src/components/DsfrSelect/DsfrSelect.stories.ts
@@ -28,6 +28,11 @@ export default {
       description:
         'Liste des options proposées par le `<select>` à lui passer sous forme de tableau de string ou de tableau d’objets avec une propriété `"text"` et une propriété `"value"`',
     },
+    optionGroups: {
+      control: 'object',
+      description:
+        'Liste des options groupées proposées par le `<select>` à lui passer sous forme de tableau d’objets (groupe) avec une propriété `"label"` et une propriété options qui est un tableau d‘options`',
+    },
     description: {
       control: 'text',
       description: 'Description optionnelle du `select`',
@@ -386,3 +391,64 @@ ListeDeroulanteAvecOptionsInactives.args = {
   modelValue: 'Option 2',
   required: false,
 }
+
+export const ListeDeroulanteAvecOptionsGroupees = (args) => ({
+  components: {
+    DsfrSelect,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
+      <DsfrSelect
+        :required="required"
+        :label="label"
+        :optionGroups="optionGroups"
+        :description="description"
+        :success-message="successMessage"
+        :error-message="errorMessage"
+        :disabled="disabled"
+        v-model="modelValue"
+      />
+    </div>
+    `,
+
+  watch: {
+    modelValue (newVal) {
+      this.onChange(newVal)
+    },
+  },
+})
+
+ListeDeroulanteAvecOptionsGroupees.args = {
+  optionGroups: [
+    {
+      label: 'groupe 1',
+      options: [
+        { value: 'Value 1', text: 'Option 1' },
+        { value: 'Value 2', text: 'Option 2' },
+      ],
+    },
+    {
+      label: 'groupe 2',
+      disabled: true,
+      options: [
+        { value: 'Value 3', text: 'Option 3' },
+        { value: 'Value 4', text: 'Option 4' },
+        { value: 'Value 5', text: 'Option 5' },
+      ],
+    },
+  ],
+  label: 'Selection d’options groupées',
+  description: 'le groupe 1 est actif et le 2 est inactif, l‘option 1 est selectionnée par défaut',
+  successMessage: '',
+  errorMessage: '',
+  disabled: false,
+  modelValue: 'Value 1',
+  required: false,
+}
diff --git a/src/components/DsfrSelect/DsfrSelect.types.ts b/src/components/DsfrSelect/DsfrSelect.types.ts
@@ -12,4 +12,5 @@ export type DsfrSelectProps = {
   successMessage?: string
   errorMessage?: string
   defaultUnselectedText?: string
+  optionGroups?: ({ label: string, options: (DsfrSelectOption | { value: DsfrSelectOption, text: string, disabled?: boolean })[], disabled?: boolean })[]
 }
diff --git a/src/components/DsfrSelect/DsfrSelect.vue b/src/components/DsfrSelect/DsfrSelect.vue
@@ -15,6 +15,7 @@ const props = withDefaults(defineProps<DsfrSelectProps>(), {
   selectId: () => useRandomId('select'),
   modelValue: undefined,
   options: () => [],
+  optionGroups: () => [],
   label: '',
   name: undefined,
   description: undefined,
@@ -92,11 +93,29 @@ const messageType = computed(() => {
         :key="index"
         :selected="modelValue === option || (typeof option === 'object' && option!.value === modelValue)"
         :value="typeof option === 'object' ? option!.value : option"
-        :disabled="!!(typeof option === 'object' && option!.disabled)"
-        :aria-disabled="!!(typeof option === 'object' && option!.disabled)"
+        :disabled="!!(disabled || typeof option === 'object' && option!.disabled)"
+        :aria-disabled="!!(disabled || typeof option === 'object' && option!.disabled)"
       >
         {{ typeof option === 'object' ? option!.text : option }}
       </option>
+      <optgroup
+        v-for="(optionGroup, index) in optionGroups"
+        :key="index"
+        :label="optionGroup.label"
+        :disabled="optionGroup.disabled"
+        :aria-disabled="!!optionGroup.disabled"
+      >
+        <option
+          v-for="(option, idx) in optionGroup.options"
+          :key="idx"
+          :selected="modelValue === option || (typeof option === 'object' && option!.value === modelValue)"
+          :value="typeof option === 'object' ? option!.value : option"
+          :disabled="!!(disabled || typeof option === 'object' && option!.disabled || optionGroup.disabled)"
+          :aria-disabled="!!(disabled || typeof option === 'object' && option!.disabled || optionGroup.disabled)"
+        >
+          {{ typeof option === 'object' ? option!.text : option }}
+        </option>
+      </optgroup>
     </select>
 
     <p
diff --git a/src/components/DsfrSelect/docs-demo/DsfrSelectDemo.vue b/src/components/DsfrSelect/docs-demo/DsfrSelectDemo.vue
@@ -6,6 +6,7 @@ import DsfrSelect from '../DsfrSelect.vue'
 const selectedOption1 = ref(0)
 const selectedOption2 = ref(null)
 const selectedOption3 = ref('')
+const selectedOption4 = ref('')
 </script>
 
 <template>
@@ -30,6 +31,7 @@ const selectedOption3 = ref('')
       label="Label du select 3"
       border-bottom
       required
+      disabled
       :options="[
         { value: 'Value 1', text: 'Text 1' },
         { value: 'Value 2', text: 'Text 2' },
@@ -39,5 +41,30 @@ const selectedOption3 = ref('')
       ]"
     />
     Select 3 : {{ selectedOption3 }} ({{ typeof selectedOption3 }})
+    <DsfrSelect
+      v-model="selectedOption4"
+      label="Select 4 avec groupes d'options (optgroup) dont 1 est désactivé"
+      border-bottom
+      required
+      :option-groups="[
+        {
+          label: 'groupe 1',
+          options: [
+            { value: 'Value 1', text: 'Text 1' },
+            { value: 'Value 2', text: 'Text 2' },
+          ],
+        },
+        {
+          label: 'groupe 2',
+          disabled: true,
+          options: [
+            { value: 'Value 3', text: 'Text 3' },
+            { value: 'Value 4', text: 'Text 4' },
+            { value: 'Value 5', text: 'Text 5' },
+          ],
+        },
+      ]"
+    />
+    Select 4 : {{ selectedOption4 }} ({{ typeof selectedOption4 }})
   </div>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -12,4 +12,5 @@ export type DsfrSelectProps = {`
`12`	`12`	`successMessage?: string`
`13`	`13`	`errorMessage?: string`
`14`	`14`	`defaultUnselectedText?: string`
	`15`	`+ optionGroups?: ({ label: string, options: (DsfrSelectOption \| { value: DsfrSelectOption, text: string, disabled?: boolean })[], disabled?: boolean })[]`
`15`	`16`	`}`