fix(select): correctly emit focus and blur events

fix vexip-ui#300
alphaelf · Apr 6, 2023 · e9ee8ce · e9ee8ce
1 parent 078681c
commit e9ee8ce
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/components/select/select.vue b/components/select/select.vue
@@ -10,8 +10,8 @@
       ref="reference"
       :class="selectorClass"
       tabindex="0"
-      @focus="handleFocus"
-      @blur="handleBlur"
+      @focus="!props.filter && handleFocus($event)"
+      @blur="!props.filter && handleBlur($event)"
     >
       <div
         v-if="hasPrefix"
@@ -98,7 +98,11 @@
             >
               <input
                 ref="input"
-                :class="[nh.be('input'), nh.bem('input', 'multiple')]"
+                :class="[
+                  nh.be('input'),
+                  nh.bem('input', 'multiple'),
+                  currentVisible && nh.bem('input', 'visible')
+                ]"
                 :disabled="props.disabled"
                 autocomplete="off"
                 tabindex="-1"
@@ -107,6 +111,8 @@
                 @submit.prevent
                 @input="handleFilterInput"
                 @keydown="handleFilterKeyDown"
+                @focus="handleFocus($event)"
+                @blur="handleBlur($event)"
               />
               <span ref="device" :class="nh.be('device')" aria-hidden="true">
                 {{ currentFilter }}
@@ -117,7 +123,7 @@
             <template v-if="props.filter">
               <input
                 ref="input"
-                :class="nh.be('input')"
+                :class="[nh.be('input'), currentVisible && nh.bem('input', 'visible')]"
                 :disabled="props.disabled"
                 :placeholder="
                   hittingLabel || currentLabels[0] || (props.placeholder ?? locale.placeholder)
@@ -128,6 +134,8 @@
                 aria-autocomplete="list"
                 @submit.prevent
                 @input="handleFilterInput"
+                @focus="handleFocus($event)"
+                @blur="handleBlur($event)"
               />
             </template>
             <template v-else>

diff --git a/style/select.scss b/style/select.scss
@@ -107,6 +107,7 @@ $select: map.merge(
     height: 100%;
     padding: 0;
     color: inherit;
+    pointer-events: none;
     user-select: auto;
     background-color: transparent;
     border: 0;
@@ -116,6 +117,10 @@ $select: map.merge(
       min-width: 1px;
     }
 
+    &--visible {
+      pointer-events: auto;
+    }
+
     &::placeholder {
       color: get-css-var('input-placeholder-color');
     }