feat: [select-refacto] - related #384 - fix style error input, improv…

…e keyboard handling (esc to close dropdown), fix reset search query feature when dropdown is closed
PrestaShopCorp · Nov 20, 2024 · 301ab81 · 301ab81
1 parent b55a3e6
commit 301ab81
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
@@ -4,6 +4,7 @@
     class="puik-select"
     role="listbox"
     :aria-multiselectable="props.multiSelect"
+    @keydown.esc="closeOptions"
   >
     <div
       :class="[
@@ -23,10 +24,15 @@
         {{ props.label }}
       </puik-label>
       <template v-if="props.multiSelect">
-        <div
+        <button
           v-if="selectedMultipleOptions.length > 0"
+          :id="props.id"
           :class="['puik-multi-select__options-tags']"
           tabindex="0"
+          role="combobox"
+          :aria-expanded="openRef"
+          :aria-controls="`dropdown-${props.id}`"
+          :value="JSON.stringify(selectedMultipleOptions)"
           @click.stop="toggleOptions"
           @keydown.space.prevent.stop="toggleOptions"
           @keydown.enter.prevent.stop="toggleOptions"
@@ -47,15 +53,10 @@
             @close="deselectOption(option)"
             @click.stop="openOptions"
           />
-          <input
-            :id="props.id"
-            type="hidden"
-            :name="props.id"
-            :value="JSON.stringify(selectedMultipleOptions)"
-          >
-        </div>
+        </button>
         <template v-else>
           <puik-input
+            :id="props.id"
             :class="[
               'puik-multi-select__input',
               { 'puik-multi-select__input--error': hasError }
@@ -253,6 +254,7 @@ const searchOptions = () => {
 };
 const resetSearchQuery = () => {
   searchQuery.value = '';
+  emit('search', '', props.options);
 };
 
 const isAllSelected = computed(() => {
@@ -307,10 +309,12 @@ const toggleSelectAll = () => {
 const toggleOptions = () => {
   emit('open', !props.open);
   openRef.value = !openRef.value;
+  resetSearchQuery();
 };
 const openOptions = () => {
   emit('open', true);
   openRef.value = true;
+  resetSearchQuery();
 };
 const closeOptions = () => {
   emit('open', false);

diff --git a/packages/theme/src/puik-select.scss b/packages/theme/src/puik-select.scss
@@ -4,9 +4,6 @@
   @extend .puik-body-default;
   &__container {
     @apply flex flex-col relative;
-    &--error {
-      @apply border border-red;
-    }
   }
 
   &__label {
@@ -65,21 +62,22 @@
       @apply mr-1;
     }
   }
-
-  .puik-select__container {
-    &--error {
-      @apply border border-red;
-      .puik-multi-select__input--error,
-      .puik-single-select__input--error {
-        > .puik-input__wrapper:hover {
-          @apply border border-red;
-        }
+
+  .puik-multi-select__input--error,
+  .puik-single-select__input--error {
+    > .puik-input__wrapper {
+      @apply border border-transparent ring-2 ring-red ring-inset;
+      &:hover{
+        @apply border border-red;
       }
     }
   }
   .puik-select__container--error {
-    .puik-multi-select__options-tags:hover {
-      @apply border border-red;
+    .puik-multi-select__options-tags {
+      @apply border border-transparent ring-2 ring-red ring-inset;
+      &:hover{
+        @apply border border-red;
+      }
     }
   }
 }