From 2c7739205f958d8b7fe88a2ad23f436d57987657 Mon Sep 17 00:00:00 2001
From: Nico <20305403+narduin@users.noreply.github.com>
Date: Tue, 4 Feb 2025 15:17:46 +0100
Subject: [PATCH] feat: multiselect migration (#654)

* feat(multiselect): migrate component
All instances of vue-multiselect have been replaced by @vueform/multiselect
Logic and styles have been ported.
Accessibility and looks have been enhanced.

* feat(multiselect): remove dep
* feat(multiselect): global debounce wait time util
---
 configs/defis/config.yaml                     |   2 +
 configs/ecospheres/config.yaml                |   2 +
 configs/hackathon/config.yaml                 |   2 +
 configs/logistique/config.yaml                |   2 +
 configs/meteo-france/config.yaml              |   2 +
 configs/simplification/config.yaml            |   2 +
 package-lock.json                             |  19 +--
 package.json                                  |   3 +-
 src/assets/main.css                           |   1 +
 src/assets/multiselect.css                    | 139 ++++++------------
 src/components/SearchComponent.vue            | 109 +++++++-------
 .../forms/SelectSpatialCoverage.vue           | 108 ++++++++------
 src/components/forms/SelectTopicGroup.vue     |   3 +
 .../forms/bouquet/BouquetOwnerForm.vue        |  91 +++++++-----
 .../forms/dataset/DatasetEditModal.vue        |   2 +
 .../forms/dataset/SelectDataset.vue           |  18 +--
 .../views/indicators/IndicatorsListView.vue   |   3 +-
 src/utils/bouquetGroups.ts                    |   4 +-
 src/utils/config.ts                           |   3 +
 src/views/bouquets/BouquetFormView.vue        |   5 +-
 src/views/bouquets/BouquetsListView.vue       |   4 +-
 src/views/datasets/DatasetsListView.vue       |   4 +-
 22 files changed, 257 insertions(+), 271 deletions(-)

diff --git a/configs/defis/config.yaml b/configs/defis/config.yaml
index ab644bc88..407b1f08c 100644
--- a/configs/defis/config.yaml
+++ b/configs/defis/config.yaml
@@ -228,6 +228,8 @@ website:
     display: false
     content: Notice avec un [lien beta](/beta) et du _style_
     closeable: false
+  # debounce high enough for accessibility (screen readers will announce results)
+  default_debounce_wait: 600
   # display settings
   pagination_sizes:
     organizations_list: 9
diff --git a/configs/ecospheres/config.yaml b/configs/ecospheres/config.yaml
index 1a4de50a4..f52b86825 100644
--- a/configs/ecospheres/config.yaml
+++ b/configs/ecospheres/config.yaml
@@ -129,6 +129,8 @@ website:
   list_search_topics:
   url_search_topics:
   oauth_option: true
+  # debounce high enough for accessibility (screen readers will announce results)
+  default_debounce_wait: 600
   pagination_sizes:
     organizations_list: 9
     topics_list: 100
diff --git a/configs/hackathon/config.yaml b/configs/hackathon/config.yaml
index 2e10d5f2e..9ce62cb6e 100644
--- a/configs/hackathon/config.yaml
+++ b/configs/hackathon/config.yaml
@@ -111,6 +111,8 @@ website:
     display: false
     content: Notice avec un [lien beta](/beta) et du _style_
     closeable: false
+  # debounce high enough for accessibility (screen readers will announce results)
+  default_debounce_wait: 600
   # display settings
   pagination_sizes:
     organizations_list: 9
diff --git a/configs/logistique/config.yaml b/configs/logistique/config.yaml
index 11943cad5..437f0a330 100644
--- a/configs/logistique/config.yaml
+++ b/configs/logistique/config.yaml
@@ -120,6 +120,8 @@ website:
     display: false
     content: Notice avec un [lien beta](/beta) et du _style_
     closeable: false
+  # debounce high enough for accessibility (screen readers will announce results)
+  default_debounce_wait: 600
   # display settings
   pagination_sizes:
     organizations_list: 9
diff --git a/configs/meteo-france/config.yaml b/configs/meteo-france/config.yaml
index 5c7392a68..1cdc0d956 100644
--- a/configs/meteo-france/config.yaml
+++ b/configs/meteo-france/config.yaml
@@ -145,6 +145,8 @@ website:
     display: false
     content: Notice avec un [lien beta](/beta) et du _style_
     closeable: false
+  # debounce high enough for accessibility (screen readers will announce results)
+  default_debounce_wait: 600
   # display settings
   pagination_sizes:
     organizations_list: 9
diff --git a/configs/simplification/config.yaml b/configs/simplification/config.yaml
index 6b607cf6a..c2d851ee6 100644
--- a/configs/simplification/config.yaml
+++ b/configs/simplification/config.yaml
@@ -233,6 +233,8 @@ website:
     display: false
     content: Notice avec un [lien beta](/beta) et du _style_
     closeable: false
+  # debounce high enough for accessibility (screen readers will announce results)
+  default_debounce_wait: 600
   # display settings
   pagination_sizes:
     organizations_list: 9
diff --git a/package-lock.json b/package-lock.json
index f64e8ba24..b150b3019 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@json2csv/plainjs": "^7.0.6",
         "@unhead/vue": "^1.11.18",
         "@vee-validate/rules": "^4.15.0",
-        "@vueform/multiselect": "^2.6.10",
+        "@vueform/multiselect": "^2.6.11",
         "@vueuse/core": "^12.4.0",
         "@vueuse/integrations": "^12.4.0",
         "axios": "^1.7.9",
@@ -27,7 +27,6 @@
         "vue": "^3.5.13",
         "vue-loading-overlay": "^6.0.6",
         "vue-matomo": "^4.2.0",
-        "vue-multiselect": "^3.1.0",
         "vue-router": "^4.5.0",
         "vue3-text-clamp": "^0.1.2",
         "vue3-toastify": "^0.2.8"
@@ -3430,9 +3429,9 @@
       }
     },
     "node_modules/@vueform/multiselect": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/@vueform/multiselect/-/multiselect-2.6.10.tgz",
-      "integrity": "sha512-w1otA5P2F7Bg0Er9ohIsBg/Xkda/9ZzCO62PmXXmjS2mOEKWPdb/852FQbc8Gv99EYRotfxgyJ5lTC+c7YeCTA==",
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/@vueform/multiselect/-/multiselect-2.6.11.tgz",
+      "integrity": "sha512-iG4TGfqE3baftbSGF0PhoS+xZOCnV0ChkDo9rwhJ/Qi2YlCdb6tyQCjvyug3jnzncga8+d85kx0WvG7rDYFqiA==",
       "license": "MIT"
     },
     "node_modules/@vueuse/core": {
@@ -14432,16 +14431,6 @@
         "npm": ">= 3.0.0"
       }
     },
-    "node_modules/vue-multiselect": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.1.0.tgz",
-      "integrity": "sha512-+i/fjTqFBpaay9NP+lU7obBeNaw2DdFDFs4mqhsM0aEtKRdvIf7CfREAx2o2B4XDmPrBt1r7x1YCM3BOMLaUgQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.1",
-        "npm": ">= 6.14.15"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
diff --git a/package.json b/package.json
index 0b57fe47c..600b17fd5 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@json2csv/plainjs": "^7.0.6",
     "@unhead/vue": "^1.11.18",
     "@vee-validate/rules": "^4.15.0",
-    "@vueform/multiselect": "^2.6.10",
+    "@vueform/multiselect": "^2.6.11",
     "@vueuse/core": "^12.4.0",
     "@vueuse/integrations": "^12.4.0",
     "axios": "^1.7.9",
@@ -39,7 +39,6 @@
     "vue": "^3.5.13",
     "vue-loading-overlay": "^6.0.6",
     "vue-matomo": "^4.2.0",
-    "vue-multiselect": "^3.1.0",
     "vue-router": "^4.5.0",
     "vue3-text-clamp": "^0.1.2",
     "vue3-toastify": "^0.2.8"
diff --git a/src/assets/main.css b/src/assets/main.css
index a591a94b1..a4c8d2ede 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -5,6 +5,7 @@
   --blue-france-950-100: var(--blue-cumulus-950-100);
   --blue-france-950-100-hover: var(--blue-cumulus-950-100-hover);
   --blue-france-950-100-active: var(--blue-cumulus-950-100-active);
+  --blue-france-sun-113: #000091;
   --blue-france-sun-113-625: var(--blue-cumulus-sun-368-moon-732);
   --blue-france-sun-113-625-hover: var(--blue-cumulus-sun-368-moon-732-hover);
   --blue-france-sun-113-625-active: var(--blue-cumulus-sun-368-moon-732-active);
diff --git a/src/assets/multiselect.css b/src/assets/multiselect.css
index 2a99dbd12..e083762ec 100644
--- a/src/assets/multiselect.css
+++ b/src/assets/multiselect.css
@@ -1,108 +1,67 @@
-.multiselect__option,
-.multiselect__single {
-  white-space: normal;
-  h4 {
-    font-size: 1.2rem;
+.multiselect {
+  --ms-max-height: 20rem;
+  --ms-bg: var(--background-contrast-grey);
+  --ms-spinner-color: var(--blue-cumulus-sun-368-moon-732);
+  --ms-option-bg-selected: var(--blue-cumulus-sun-368-moon-732);
+  --ms-option-bg-pointed: var(--blue-cumulus-sun-368-moon-732);
+  --ms-option-color-pointed: var(--background-contrast-grey);
+  --ms-option-bg-selected-pointed: var(--blue-cumulus-sun-368-moon-732-hover);
+  &&,
+  &&.is-active {
+    border: none;
+    box-shadow: none;
   }
-}
-.multiselect__option--highlight {
-  background-color: var(--background-alt-grey-active);
-  color: var(--text-default-grey);
-}
-.multiselect__option--highlight::after {
-  background-color: var(--background-alt-grey-active);
-  color: var(--text-default-grey);
-}
-.multiselect__spinner::before,
-.multiselect__spinner::after {
-  border-color: var(--background-alt-grey-active) transparent transparent;
-  top: 60%;
-}
-.multiselect__select {
-  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23161616' d='m12 13.1 5-4.9 1.4 1.4-6.4 6.3-6.4-6.4L7 8.1l5 5z'/%3E%3C/svg%3E");
-  background-image: var(--data-uri-svg);
-  background-position: calc(100% - 1rem) 50%;
-  background-repeat: no-repeat;
-  background-size: 1rem 1rem;
-  .multiselect--active & {
+  .multiselect-caret {
+    --ms-px: 1rem;
+    --data-uri-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23161616' d='m12 13.1 5-4.9 1.4 1.4-6.4 6.3-6.4-6.4L7 8.1l5 5z'/%3E%3C/svg%3E");
+    -webkit-mask-image: var(--data-uri-svg);
+    mask-image: var(--data-uri-svg);
+    width: 1.1rem;
+    transition: none;
+  }
+  .multiselect-caret.is-open {
     transform: none;
+    transition: none;
   }
-}
-.multiselect__select::before {
-  content: unset;
-}
-.multiselect__clear {
-  position: absolute;
-  right: 15px;
-  height: 40px;
-  width: 40px;
-  display: block;
-  cursor: pointer;
-  z-index: 3;
+  .multiselect-option {
+    position: relative;
 
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 3px;
-    height: 16px;
-    background-color: var(--border-plain-grey);
-    top: 30%;
-    right: 4px;
-  }
+    &:has(button) {
+      padding: 0;
+    }
 
-  &:before {
-    transform: rotate(45deg);
-  }
+    button {
+      --hover-tint: inherit;
+      --active-tint: var(--background-action-high-blue-france-active);
+      padding: 0.75rem;
+      block-size: 100%;
+      inline-size: 100%;
+      text-align: left;
 
-  &:after {
-    transform: rotate(-45deg);
+      &:focus {
+        outline-offset: -4px;
+      }
+    }
+
+    &.is-pointed {
+      button:focus {
+        outline-color: var(--background-default-grey);
+      }
+    }
+  }
+  .multiselect-dropdown {
+    overflow-y: auto;
   }
-}
-.multiselect {
-  --ms-bg: var(--background-contrast-grey);
 }
 .multiselect:has(.multiselect-single-label .card) {
   --ms-bg: var(--background-default-grey);
+  border: 1px solid var(--background-contrast-grey);
 }
 .multiselect-wrapper {
   --ms-radius: 0.25rem 0.25rem 0 0;
   --ms-caret-color: var(--border-plain-grey);
 }
+/* dsfr-input style */
 .multiselect-search {
   box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);
 }
-.multiselect__tags {
-  --idle: transparent;
-  --hover: var(--background-contrast-grey-hover);
-  --active: var(--background-contrast-grey-active);
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  background-color: var(--background-contrast-grey);
-  border: 0;
-  box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);
-  color: var(--text-title-grey);
-  display: block;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  padding: 0.5rem 2.5rem 0.5rem 1rem;
-  width: 100%;
-  border-radius: 0.25rem 0.25rem 0 0;
-  & > .multiselect__single {
-    padding: 0;
-    background-color: var(--background-contrast-grey);
-  }
-}
-.multiselect__tags:focus-within {
-  outline: 2px solid #0a76f6;
-  outline-offset: -2px;
-}
-.multiselect__input {
-  padding: 0;
-  background-color: transparent;
-}
-.multiselect__placeholder {
-  color: var(--text-default-grey);
-}
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 14cee1a09..508c6dded 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import DOMPurify from 'dompurify'
 import { ref } from 'vue'
-import Multiselect from 'vue-multiselect'
-import 'vue-multiselect/dist/vue-multiselect.css'
+
+import Multiselect from '@vueform/multiselect'
+import '@vueform/multiselect/themes/default.css'
+
 import { useRouter } from 'vue-router'
 
 import '@/assets/multiselect.css'
@@ -50,6 +52,7 @@ const emits = defineEmits(['search'])
 
 const query = ref('')
 const selectedMultiSearch = ref()
+const multiselect = useTemplateRef('multiselect')
 
 const doSimpleSearch = (event: string) => {
   query.value = event
@@ -63,7 +66,7 @@ const doSimpleSearch = (event: string) => {
 
 const doMultiSearch = (item: { text: string; route: string }) => {
   router.push({ name: item.route, query: { q: query.value } })
-  selectedMultiSearch.value = undefined
+  clear()
   query.value = ''
   emits('search')
 }
@@ -77,6 +80,13 @@ const dropdownLabel = (text: string) => {
   const queryText = query.value ? `«&#8239;<i>${query.value}</i>&#8239;»` : ''
   return DOMPurify.sanitize(text.replace('{}', queryText))
 }
+
+const clear = () => {
+  // reset v-model
+  selectedMultiSearch.value = undefined
+  // reset component state
+  multiselect.value?.clear()
+}
 </script>
 
 <template>
@@ -103,43 +113,52 @@ const dropdownLabel = (text: string) => {
   />
 
   <div v-else>
-    <label :id="`${id}-label`" :for="id" class="fr-sr-only">
-      Rechercher. Saisissez un mot clé puis choisissez une des options situés
-      après le champ pour lancer la recherche dans la rubrique souhaitée</label
-    >
+    <label :id="`${id}-label`" :for="id" class="fr-sr-only">Rechercher</label>
+    <p :id="`${id}-description`" class="fr-sr-only">
+      Saisissez un mot clé puis choisissez une des options situés après le champ
+      pour lancer la recherche dans la rubrique souhaitée
+    </p>
     <Multiselect
       :id="id"
+      ref="multiselect"
       v-model="selectedMultiSearch"
       class="select-search"
-      :options="dropdown"
+      role="search"
+      :object="true"
+      value-prop="route"
       label="text"
-      track-by="route"
-      placeholder=""
-      select-label=""
-      deselect-label=""
-      :aria-labelledby="`${id}-label`"
-      aria-owns=""
-      :multiple="false"
       :searchable="true"
-      :internal-search="false"
+      :filter-results="false"
+      :options="dropdown"
       :clear-on-select="true"
+      :clear-on-search="true"
+      :clear-on-blur="true"
       :close-on-select="true"
-      :max-height="600"
-      :show-no-results="false"
-      :hide-selected="true"
+      placeholder="Rechercher"
+      aria-owns=""
+      :aria="{
+        'aria-describedby': `${id}-description`,
+        // useless or unsupported https://github.com/vueform/multiselect/issues/436
+        'aria-multiselectable': null,
+        'aria-placeholder': null
+      }"
       @search-change="onSearchChange"
       @update:model-value="doMultiSearch"
     >
-      <template #option="slotProps">
+      <template #singlelabel>
+        <div class="multiselect-single-label fr-py-2w">
+          {{ query }}
+        </div>
+      </template>
+
+      <template #option="{ option }">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="dropdownLabel(slotProps.option.text)"></span>
+        <button v-html="dropdownLabel(option.text)" />
       </template>
+
       <template #caret>
         <VIconCustom name="search-line" class="search-icon" />
       </template>
-      <template #placeholder>
-        <span aria-hidden="true" class="visible-label">{{ placeholder }}</span>
-      </template>
     </Multiselect>
   </div>
 </template>
@@ -155,27 +174,24 @@ const dropdownLabel = (text: string) => {
 :deep(.fr-label.invisible + .filter-input) {
   margin: 0;
 }
-:deep(.filter-input) {
+:deep(.filter-input),
+.select-search :deep(input),
+:deep(.multiselect-placeholder) {
   padding-inline-start: calc(var(--icon-width) + 1rem);
 }
 .select-search {
   position: relative;
   display: flex;
 }
+.select-search :deep(input) {
+  padding-inline-start: calc(var(--icon-width) + 1rem);
+  box-shadow: inset 0 -2px 0 0 var(--blue-france-sun-113);
+}
 .visible-label {
   margin-inline-start: var(--icon-width);
 }
 
-:deep(.multiselect__placeholder) {
-  margin: 0;
-  font-style: italic;
-  color: var(--text-mention-grey);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  inline-size: 100%;
-  overflow: hidden;
-}
-::placeholder {
+:deep(.multiselect-placeholder) {
   font-style: italic;
   color: var(--text-mention-grey);
 }
@@ -187,27 +203,4 @@ const dropdownLabel = (text: string) => {
   translate: 0 -10px;
   max-inline-size: var(--icon-width);
 }
-:deep(.multiselect__tags) {
-  border: 0;
-  box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france);
-  margin: 0;
-  max-block-size: none;
-  --hover: var(--background-contrast-grey-hover);
-  --active: var(--background-contrast-grey-active);
-  background-color: var(--background-contrast-grey);
-  padding: 6px 40px 0 15px;
-  min-inline-size: 42px;
-  inline-size: 100%;
-}
-:deep(.multiselect__input),
-:deep(.multiselect__single) {
-  background: var(--background-contrast-grey);
-}
-.select-search :deep(input) {
-  margin-inline-start: var(--icon-width);
-  inline-size: 100%;
-}
-:deep(.multiselect__content-wrapper) {
-  margin-block-start: 40px;
-}
 </style>
diff --git a/src/components/forms/SelectSpatialCoverage.vue b/src/components/forms/SelectSpatialCoverage.vue
index a1edb2bcb..e43fe6765 100644
--- a/src/components/forms/SelectSpatialCoverage.vue
+++ b/src/components/forms/SelectSpatialCoverage.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core'
-import { onMounted, ref, type PropType, type Ref } from 'vue'
-import Multiselect from 'vue-multiselect'
-import 'vue-multiselect/dist/vue-multiselect.css'
+import { onMounted, ref, type PropType } from 'vue'
+
+import Multiselect from '@vueform/multiselect'
+import '@vueform/multiselect/themes/default.css'
 
-import '@/assets/multiselect.css'
 import type { SpatialCoverage, SpatialCoverageLevel } from '@/model/spatial'
 import SpatialAPI from '@/services/api/SpatialAPI'
 import { useSpatialStore } from '@/store/SpatialStore'
 
+import { debounceWait } from '@/utils/config'
+
 const selectedSpatialCoverage = defineModel('spatialCoverageModel', {
   type: Object as PropType<SpatialCoverage>
 })
@@ -17,17 +19,11 @@ defineProps({
   short: {
     type: Boolean,
     default: false
-  },
-  placeholder: {
-    type: String,
-    default: 'ex: Toulouse Métropole'
   }
 })
 
 const isLoading = ref(false)
 
-const options: Ref<SpatialCoverage[]> = ref([])
-
 const getLevelById = (levelId: string): SpatialCoverageLevel | undefined => {
   return useSpatialStore().getLevelById(levelId)
 }
@@ -35,16 +31,19 @@ const getLevelById = (levelId: string): SpatialCoverageLevel | undefined => {
 const search = useDebounceFn(async (query: string) => {
   isLoading.value = true
   if (!query) {
-    options.value = []
     isLoading.value = false
     return
   }
-  const zones = await new SpatialAPI().suggestZones(query, {
-    page_size: 10
-  })
-  options.value = zones
-  isLoading.value = false
-}, 400)
+  try {
+    return await new SpatialAPI().suggestZones(query, {
+      page_size: 10
+    })
+  } catch (error) {
+    console.error('Search error', error)
+  } finally {
+    isLoading.value = false
+  }
+}, debounceWait)
 
 const clear = () => {
   selectedSpatialCoverage.value = undefined
@@ -58,56 +57,69 @@ onMounted(() => {
 <template>
   <Multiselect
     id="select-spatial-coverage"
-    ref="multiselect"
     v-model="selectedSpatialCoverage"
-    class="fr-input-wrap"
-    :options="options"
+    role="search"
+    :object="true"
+    value-prop="id"
     label="name"
-    track-by="id"
+    track-by="name"
+    class="fr-input-wrap"
+    :filter-results="false"
+    :min-chars="3"
+    :clear-on-search="true"
+    :delay="0"
+    :options="search"
     placeholder=""
-    :select-label="short ? '' : 'Entrée pour sélectionner'"
-    :deselect-label="short ? '' : 'Entrée pour supprimer'"
-    :multiple="false"
+    :resolve-on-load="false"
     :searchable="true"
-    :internal-search="false"
-    :loading="isLoading"
-    :clear-on-select="true"
-    :close-on-select="true"
-    :max-height="600"
-    :show-no-results="false"
-    :hide-selected="false"
-    @search-change="search"
+    :limit="10"
+    :strict="false"
+    :clear-on-blur="false"
+    :allow-absent="true"
+    no-options-text="Aucune couverture territoriale trouvée, précisez ou élargissez votre recherche."
+    :aria="{
+      // useless or unsupported yet https://github.com/vueform/multiselect/issues/436
+      'aria-labelledby': null,
+      'aria-multiselectable': null,
+      'aria-placeholder': null
+    }"
   >
-    <template #caret>
-      <div
-        v-if="selectedSpatialCoverage"
-        class="multiselect__clear"
-        @mousedown.prevent.stop="clear"
-      ></div>
+    <template #clear>
+      <button
+        class="multiselect-clear"
+        @click="clear"
+        @keydown.prevent.enter="clear"
+        @keydown.prevent.space="clear"
+      >
+        <span class="fr-sr-only">Supprimer la sélection</span>
+        <span aria-hidden class="multiselect-clear-icon"></span>
+      </button>
     </template>
-    <template #singleLabel="slotProps">
-      <div>
+
+    <template #singlelabel="{ value }">
+      <div class="multiselect-single-label fr-py-2w">
         <span v-if="short">
-          {{ slotProps.option.name }}
+          {{ value.name }}
         </span>
         <span v-else>
-          {{ getLevelById(slotProps.option.level)?.name }} :
-          {{ slotProps.option.name }} ({{ slotProps.option.code }})
+          {{ getLevelById(value.level)?.name }} : {{ value.name }} ({{
+            value.code
+          }})
         </span>
       </div>
     </template>
-    <template #option="slotProps">
+
+    <template #option="{ option }">
       <div class="spatial-select-option">
         <div class="header">
-          <span class="name">{{ slotProps.option.name }}</span>
-          <span class="code fr-ml-1v">{{ slotProps.option.code }}</span>
+          <span class="name">{{ option.name }}</span>
+          <span class="code fr-ml-1v">{{ option.code }}</span>
         </div>
         <div class="level">
-          {{ getLevelById(slotProps.option.level)?.name }}
+          {{ getLevelById(option.level)?.name }}
         </div>
       </div>
     </template>
-    <template #noOptions> Précisez ou élargissez votre recherche </template>
   </Multiselect>
 </template>
 
diff --git a/src/components/forms/SelectTopicGroup.vue b/src/components/forms/SelectTopicGroup.vue
index bff66d785..9232dc9e3 100644
--- a/src/components/forms/SelectTopicGroup.vue
+++ b/src/components/forms/SelectTopicGroup.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { DatasetProperties, DatasetsGroups } from '@/model/topic'
+
 import Multiselect from '@vueform/multiselect'
 import '@vueform/multiselect/themes/default.css'
 
@@ -57,6 +58,7 @@ const trimGroupName = (groupName: string) => {
   <Multiselect
     id="regroupement-input"
     v-model="datasetProperties.group"
+    role="search"
     :options="groupOptions"
     :searchable="true"
     :limit="5"
@@ -83,6 +85,7 @@ const trimGroupName = (groupName: string) => {
 
     <template #clear>
       <button
+        type="button"
         class="multiselect-clear"
         @click="clear"
         @keydown.enter="clear"
diff --git a/src/components/forms/bouquet/BouquetOwnerForm.vue b/src/components/forms/bouquet/BouquetOwnerForm.vue
index 6b0f0c61e..ec7709a73 100644
--- a/src/components/forms/bouquet/BouquetOwnerForm.vue
+++ b/src/components/forms/bouquet/BouquetOwnerForm.vue
@@ -2,14 +2,14 @@
 import type { Organization } from '@datagouv/components'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, ref, watch, type Ref } from 'vue'
-import Multiselect from 'vue-multiselect'
-import 'vue-multiselect/dist/vue-multiselect.css'
 
-import '@/assets/multiselect.css'
+import Multiselect from '@vueform/multiselect'
+import '@vueform/multiselect/themes/default.css'
+
 import type { TopicPostData } from '@/model/topic'
 import SearchAPI from '@/services/api/SearchOrgAPI'
 import { useUserStore } from '@/store/UserStore'
-import { useTopicsConf } from '@/utils/config'
+import { debounceWait, useTopicsConf } from '@/utils/config'
 
 const topic = defineModel({
   type: Object as () => Partial<TopicPostData>,
@@ -60,19 +60,21 @@ const selectOptions = computed(() => {
 })
 
 const isLoading = ref(false)
-const options: Ref<Organization[]> = ref([])
 
 const search = useDebounceFn(async (query: string) => {
   isLoading.value = true
   if (!query) {
-    options.value = []
     isLoading.value = false
     return
   }
-  const organizations = await new SearchAPI().search(query, 10)
-  options.value = organizations
-  isLoading.value = false
-}, 400)
+  try {
+    return await new SearchAPI().search(query, 10)
+  } catch (error) {
+    console.error('Search error', error)
+  } finally {
+    isLoading.value = false
+  }
+}, debounceWait)
 
 const onSelectOwnOrganization = () => {
   if (selectedOwnOrganization.value) {
@@ -91,7 +93,7 @@ const onSelectAnyOrganization = () => {
 }
 
 const clear = () => {
-  selectedAnyOrganization.value = null
+  selectedAnyOrganization.value = undefined
 }
 
 watch(choice, () => {
@@ -126,41 +128,54 @@ watch(choice, () => {
         >
         <Multiselect
           id="any-org-select-bouquet"
-          ref="multiselect"
           v-model="selectedAnyOrganization"
           role="search"
-          :options="options"
-          track-by="id"
+          :object="true"
+          value-prop="id"
+          label="title"
+          track-by="title"
+          class="fr-input-wrap"
+          :filter-results="false"
+          :min-chars="3"
+          :clear-on-search="true"
+          :delay="0"
+          :options="search"
           placeholder=""
-          select-label="Entrée pour sélectionner"
-          :multiple="false"
+          :resolve-on-load="false"
           :searchable="true"
-          :internal-search="false"
-          :loading="isLoading"
-          :clear-on-select="true"
-          :close-on-select="true"
-          :show-no-results="false"
-          :hide-selected="true"
-          :limit="3"
-          :options-limit="100"
-          @search-change="search"
+          :limit="10"
+          :strict="false"
+          :clear-on-blur="false"
+          :allow-absent="true"
+          no-options-text="Aucune organisation trouvée, précisez ou élargissez votre recherche."
+          :aria="{
+            // useless or unsupported yet https://github.com/vueform/multiselect/issues/436
+            'aria-labelledby': null,
+            'aria-multiselectable': null,
+            'aria-placeholder': null
+          }"
           @select="onSelectAnyOrganization()"
         >
-          <template #caret>
-            <div
-              v-if="selectedAnyOrganization"
-              class="multiselect__clear"
-              @mousedown.prevent.stop="clear"
-            />
+          <template #clear>
+            <button
+              class="multiselect-clear"
+              @click="clear"
+              @keydown.prevent.enter="clear"
+              @keydown.prevent.space="clear"
+            >
+              <span class="fr-sr-only">Supprimer la sélection</span>
+              <span aria-hidden class="multiselect-clear-icon"></span>
+            </button>
           </template>
-          <template #singleLabel="slotProps">
-            {{ slotProps.option.name }}
-          </template>
-          <template #option="slotProps">
-            {{ slotProps.option.name }}
+
+          <template #singlelabel="{ value }">
+            <div class="multiselect-single-label fr-py-2w">
+              {{ value.name }}
+            </div>
           </template>
-          <template #noOptions>
-            Précisez ou élargissez votre recherche
+
+          <template #option="{ option }">
+            <div class="spatial-select-option">{{ option.name }}</div>
           </template>
         </Multiselect>
       </div>
diff --git a/src/components/forms/dataset/DatasetEditModal.vue b/src/components/forms/dataset/DatasetEditModal.vue
index 74046010b..7fafec344 100644
--- a/src/components/forms/dataset/DatasetEditModal.vue
+++ b/src/components/forms/dataset/DatasetEditModal.vue
@@ -41,6 +41,7 @@ const modalActions = computed(() => {
   return [
     {
       label: 'Annuler',
+      type: 'button',
       secondary: true,
       onClick: () => {
         closeModal()
@@ -48,6 +49,7 @@ const modalActions = computed(() => {
     },
     {
       label: 'Enregistrer',
+      type: 'button',
       disabled: !modalData.value.isValid,
       onClick: ($event: MouseEvent) => {
         $event.preventDefault()
diff --git a/src/components/forms/dataset/SelectDataset.vue b/src/components/forms/dataset/SelectDataset.vue
index b7e3a132c..34ec5d8fe 100644
--- a/src/components/forms/dataset/SelectDataset.vue
+++ b/src/components/forms/dataset/SelectDataset.vue
@@ -7,8 +7,10 @@ import Multiselect from '@vueform/multiselect'
 import '@vueform/multiselect/themes/default.css'
 
 import '@/assets/multiselect.css'
+
 import type { DatasetProperties } from '@/model/topic'
 import SearchAPI from '@/services/api/SearchAPI'
+import { debounceWait } from '@/utils/config'
 
 const selectedDataset = defineModel({
   type: Object as () => DatasetV2
@@ -47,7 +49,7 @@ const search = useDebounceFn(async (query: string) => {
   } finally {
     isLoading.value = false
   }
-}, 600)
+}, debounceWait)
 
 const clear = () => {
   selectedDataset.value = undefined
@@ -64,6 +66,7 @@ const clear = () => {
   <Multiselect
     id="input-dataset"
     v-model="selectedDataset"
+    role="search"
     :object="true"
     value-prop="id"
     label="title"
@@ -106,6 +109,7 @@ const clear = () => {
     </template>
     <template #clear>
       <button
+        type="button"
         class="multiselect-clear"
         @click="clear"
         @keydown.enter="clear"
@@ -119,18 +123,6 @@ const clear = () => {
 </template>
 
 <style scoped>
-:deep(.multiselect__option::after) {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  block-size: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  inline-size: 1px;
-}
-.multiselect {
-  --ms-max-height: 400px;
-}
 .multiselect-single-label {
   position: relative;
   margin-inline-end: auto;
diff --git a/src/custom/ecospheres/views/indicators/IndicatorsListView.vue b/src/custom/ecospheres/views/indicators/IndicatorsListView.vue
index 9bdfb9389..9acb5365c 100644
--- a/src/custom/ecospheres/views/indicators/IndicatorsListView.vue
+++ b/src/custom/ecospheres/views/indicators/IndicatorsListView.vue
@@ -5,6 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import GenericContainer from '@/components/GenericContainer.vue'
 import type { BreadcrumbItem } from '@/model/breadcrumb'
+import { debounceWait } from '@/utils/config'
 import IndicatorList from '../../components/indicators/IndicatorList.vue'
 import IndicatorSearch from '../../components/indicators/IndicatorSearch.vue'
 import { FILTER_KEYS, type IndicatorFilters } from '../../model/indicator'
@@ -52,7 +53,7 @@ const search = useDebounceFn((query) => {
     query: { ...route.query, q: query },
     hash: '#indicators-list'
   })
-}, 600)
+}, debounceWait)
 </script>
 
 <template>
diff --git a/src/utils/bouquetGroups.ts b/src/utils/bouquetGroups.ts
index a56c068c4..e85d2ca21 100644
--- a/src/utils/bouquetGroups.ts
+++ b/src/utils/bouquetGroups.ts
@@ -3,6 +3,8 @@ import { type ComputedRef, type Ref, ref } from 'vue'
 
 import type { DatasetProperties, DatasetsGroups } from '@/model/topic'
 
+import { debounceWait } from '@/utils/config'
+
 export const NO_GROUP = 'Sans regroupement'
 
 export const isOnlyNoGroup = (groups: DatasetsGroups) => {
@@ -147,7 +149,7 @@ export function useDatasetFilter(datasetsProperties: Ref<DatasetProperties[]>) {
   // apply search query
   const filterDatasetsProperties = useDebounceFn((value: string) => {
     searchQuery.value = value
-  }, 600)
+  }, debounceWait)
 
   return {
     isFiltering,
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 512686ee2..0e139a0f5 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -34,3 +34,6 @@ export const useTopicsConf = (): TopicsConfNormalized => {
     topicsActivateReadMore: topicsConf.activate_read_more
   }
 }
+
+// Get debounce value or set default.
+export const debounceWait: number = config.website.default_debounce_wait ?? 600
diff --git a/src/views/bouquets/BouquetFormView.vue b/src/views/bouquets/BouquetFormView.vue
index a0ba9c330..82f3bc9ae 100644
--- a/src/views/bouquets/BouquetFormView.vue
+++ b/src/views/bouquets/BouquetFormView.vue
@@ -214,7 +214,7 @@ const onSubmit = async () => {
       <h1 class="fr-col-auto fr-mb-2v">
         {{ isCreate ? `Nouveau ${topicsName}` : topic.name }}
       </h1>
-      <form novalidate>
+      <form novalidate @submit.prevent>
         <div
           v-show="formErrors.length"
           class="fr-my-4w fr-p-2w error-status"
@@ -261,6 +261,7 @@ const onSubmit = async () => {
         <div class="fr-mt-4w fr-grid-row fr-grid-row--right">
           <DsfrButton
             v-if="!isCreate"
+            type="button"
             secondary
             class="fr-mb-1w"
             label="Supprimer"
@@ -268,12 +269,14 @@ const onSubmit = async () => {
             @click.prevent="destroy"
           />
           <DsfrButton
+            type="button"
             secondary
             class="fr-mb-1w fr-ml-1w"
             label="Annuler"
             @click.prevent="cancel"
           />
           <DsfrButton
+            type="button"
             class="fr-mb-1w fr-ml-1w"
             label="Enregistrer"
             @click.prevent="onSubmit"
diff --git a/src/views/bouquets/BouquetsListView.vue b/src/views/bouquets/BouquetsListView.vue
index f4f5e31f7..3f67df986 100644
--- a/src/views/bouquets/BouquetsListView.vue
+++ b/src/views/bouquets/BouquetsListView.vue
@@ -16,7 +16,7 @@ import {
 import { NoOptionSelected } from '@/model/theme'
 import { useUserStore } from '@/store/UserStore'
 import { fromMarkdown } from '@/utils'
-import { useTopicsConf } from '@/utils/config'
+import { debounceWait, useTopicsConf } from '@/utils/config'
 
 const { topicsSlug, topicsName } = useTopicsConf()
 
@@ -118,7 +118,7 @@ const search = useDebounceFn(() => {
     .then(() => {
       setLiveResults()
     })
-}, 600)
+}, debounceWait)
 
 watch(
   props,
diff --git a/src/views/datasets/DatasetsListView.vue b/src/views/datasets/DatasetsListView.vue
index 2893223ca..e594decc2 100644
--- a/src/views/datasets/DatasetsListView.vue
+++ b/src/views/datasets/DatasetsListView.vue
@@ -24,7 +24,7 @@ import { useOrganizationStore } from '@/store/OrganizationStore'
 import { useSearchStore } from '@/store/SearchStore'
 import { useTopicStore } from '@/store/TopicStore'
 import { fromMarkdown } from '@/utils'
-import { useTopicsConf } from '@/utils/config'
+import { debounceWait, useTopicsConf } from '@/utils/config'
 
 defineEmits(['search'])
 const props = defineProps({
@@ -203,7 +203,7 @@ const delayedSearch = useDebounceFn(
         loadingInstance.hide()
       })
   },
-  600
+  debounceWait
 )
 
 watch(