Merge pull request #1119 from dnum-mi/1118-dsfr-select-required

fix(DsfrSelect): 🐛 empêche soumission formulaire si required

Author: laruiss

demo-app/views/AppForm.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue'
 import DsfrAlert from '@/components/DsfrAlert/DsfrAlert.vue'
 import DsfrButton from '@/components/DsfrButton/DsfrButton.vue'
 import DsfrCheckboxSet from '@/components/DsfrCheckbox/DsfrCheckboxSet.vue'
+import DsfrSelect from '@/components/DsfrSelect/DsfrSelect.vue'
 import DsfrFileUpload from '@/components/DsfrFileUpload/DsfrFileUpload.vue'
 import DsfrRadioButtonSet from '@/components/DsfrRadioButton/DsfrRadioButtonSet.vue'
 import type { DsfrCheckboxSetProps } from '@/components/DsfrCheckbox/DsfrCheckbox.types'
@@ -21,8 +22,15 @@ const sendFile = () => {
   console.log('filesToUpload:', filesToUpload.value) // eslint-disable-line no-console
 }
 
+const isGood = ref<boolean>()
 const whatever = ref('')
 const radioTest = ref('')
+const radioTest2 = ref('')
+
+const options = [
+  { value: true, text: 'Oui', disabled: false },
+  { value: false, text: 'Non', disabled: false },
+]
 
 const selectedCheckbox = ref(false)
 const selectedCheckboxes = ref([])
@@ -77,16 +85,16 @@ const cbOptions: DsfrCheckboxSetProps['options'] = [
         ]"
       />
       <DsfrRadioButtonSet
-        v-model="radioTest"
-        name="radio-123aui"
+        v-model="radioTest2"
+        name="radio-123auie"
         :options="[
           {
-            label: 'label 1',
+            label: 'label 2.1',
             value: 1,
             required: true,
           },
           {
-            label: 'label 2',
+            label: 'label 2.2',
             value: 2,
           },
         ]"
@@ -97,6 +105,13 @@ const cbOptions: DsfrCheckboxSetProps['options'] = [
       </DsfrRadioButtonSet>
     </div>
 
+    <DsfrSelect
+      v-model="isGood"
+      required
+      label="Est-ce que c’est bon ?"
+      :options
+    />
+
     <DsfrButton
       type="submit"
       label="Bouton de soumission du formulaire"

demo-app/views/AppHome.vue

@@ -182,6 +182,8 @@ const rows = [
   <div class="flex justify-between items-center gap-2 w-full relative">
     <DsfrTooltip
       on-hover
+      title="Titre"
+      aria-label="Le libellé"
       content="Texte de l’info-bulle qui apparaît au survol"
     >
       Au survol

src/components/DsfrSelect/DsfrSelect.vue

@@ -79,9 +79,10 @@ const messageType = computed(() => {
       @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
     >
       <option
-        :selected="!options.some(option => typeof option !== 'object' || option === null ? option === modelValue : option.value === modelValue)"
+        :selected="!options.some(option => (typeof option !== 'object' || option === null) ? option === modelValue : option.value === modelValue)"
         disabled
-        hidden
+        value=""
+        hidden=""
       >
         {{ defaultUnselectedText }}
       </option>