feat(multiselect): fix form submit + styles cleanup

opendatateam · Jan 21, 2025 · c7241af · c7241af
1 parent b8764e9
commit c7241af
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 136 deletions.
diff --git a/src/assets/multiselect.css b/src/assets/multiselect.css
@@ -1,54 +1,5 @@
-.multiselect__option,
-.multiselect__single {
-  white-space: normal;
-  h4 {
-    font-size: 1.2rem;
-  }
-}
-.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__clear {
-  position: absolute;
-  right: 15px;
-  height: 40px;
-  width: 40px;
-  display: block;
-  cursor: pointer;
-  z-index: 3;
-
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 3px;
-    height: 16px;
-    background-color: var(--border-plain-grey);
-    top: 30%;
-    right: 4px;
-  }
-
-  &:before {
-    transform: rotate(45deg);
-  }
-
-  &:after {
-    transform: rotate(-45deg);
-  }
-}
 .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);
@@ -73,12 +24,16 @@
     transition: none;
   }
   .multiselect-option {
-    padding: 0;
     position: relative;
 
+    &:has(button) {
+      padding: 0;
+    }
+
     button {
       --hover-tint: inherit;
-      padding: var(--ms-option-py, 0.5rem) var(--ms-option-px, 0.75rem);
+      --active-tint: var(--background-action-high-blue-france-active);
+      padding: 0.75rem;
       block-size: 100%;
       inline-size: 100%;
       text-align: left;
@@ -94,6 +49,9 @@
       }
     }
   }
+  .multiselect-dropdown {
+    overflow-y: auto;
+  }
 }
 .multiselect:has(.multiselect-single-label .card) {
   --ms-bg: var(--background-default-grey);
@@ -105,36 +63,3 @@
 .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
@@ -145,18 +145,6 @@ const clear = () => {
       @search-change="onSearchChange"
       @update:model-value="doMultiSearch"
     >
-      <template #clear>
-        <button
-          class="multiselect-clear"
-          @click="clear"
-          @keydown.enter="clear"
-          @keydown.space="clear"
-        >
-          <span class="fr-sr-only">Supprimer la sélection</span>
-          <span aria-hidden class="multiselect-clear-icon"></span>
-        </button>
-      </template>
-
       <template #singlelabel>
         <div class="multiselect-single-label fr-py-2w">
           {{ query }}
@@ -200,15 +188,6 @@ const clear = () => {
   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 {
   font-style: italic;
   color: var(--text-mention-grey);
@@ -221,24 +200,4 @@ const clear = () => {
   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);
-}
-
-:deep(.multiselect__content-wrapper) {
-  margin-block-start: 40px;
-}
 </style>
diff --git a/src/components/forms/SelectTopicGroup.vue b/src/components/forms/SelectTopicGroup.vue
@@ -85,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/dataset/DatasetEditModal.vue b/src/components/forms/dataset/DatasetEditModal.vue
@@ -41,13 +41,15 @@ const modalActions = computed(() => {
   return [
     {
       label: 'Annuler',
+      type: 'button',
       secondary: true,
       onClick: () => {
         closeModal()
       }
     },
     {
       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
@@ -107,6 +107,7 @@ const clear = () => {
     </template>
     <template #clear>
       <button
+        type="button"
         class="multiselect-clear"
         @click="clear"
         @keydown.enter="clear"
@@ -120,15 +121,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;
 }

diff --git 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,19 +261,22 @@ 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"
             icon="fr-icon-delete-bin-line"
             @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"