fix(base-picker): focus status fix & input-tag width bug

demo/documentation/components/selectDemo/clearable.demo.vue

@@ -27,6 +27,27 @@
         clearable
         @change="handleChange"
       />
+      <n-select
+        v-model="selectedValue"
+        placeholder="Please Select Type"
+        :options="options"
+        style="flex-grow: 1; margin-right: 12px;"
+        emit-option
+        filterable
+        clearable
+        @change="handleChange"
+      />
+      <n-select
+        v-model="selectedArray"
+        multiple
+        placeholder="Please Select Type"
+        :options="options"
+        style="flex-grow: 1;"
+        emit-option
+        filterable
+        clearable
+        @change="handleChange"
+      />
       <!--EXAMPLE_END-->
     </div>
     <pre class="n-doc-section__inspect">v-model(single): {{ JSON.stringify(selectedValue) }}, v-model(mulitple): {{ JSON.stringify(selectedArray) }}</pre>

packages/base/CancelMark/src/main.vue

@@ -3,6 +3,7 @@
     <div
       v-if="show && (clearable || arrow)"
       class="n-cancel-mark"
+      @mousedown="handleMouseDown"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
     >
@@ -85,6 +86,9 @@ export default {
     },
     handleMouseLeave () {
       this.mouseHovered = false
+    },
+    handleMouseDown (e) {
+      this.$emit('mousedown', e)
     }
   }
 }

packages/base/Picker/src/main.vue

@@ -10,11 +10,12 @@
       'n-base-picker--focus': patternInputFocused
     }"
     @click="handleClick"
-    @mousedown="handleMouseDown"
+    @mousedown.capture="handleMouseDown"
   >
     <template v-if="multiple && !filterable">
       <!-- multiple -->
       <div
+        ref="focusableEl1"
         class="n-base-picker-tags"
         :tabindex="disabled ? false : '0'"
         @blur="handleBlur"
@@ -33,28 +34,28 @@
             @click.stop="handleDeleteOption(option)"
           />
         </div>
+        <n-base-cancel-mark
+          class="n-base-picker__mark"
+          arrow
+          :show="!remote"
+          :disabled="disabled"
+          :active="active"
+          :clearable="clearable && selected"
+          @clear="handleClear"
+        />
       </div>
       <div
         class="n-base-picker__placeholder"
       >
         {{ placeholder }}
       </div>
-      <n-base-cancel-mark
-        class="n-base-picker__mark"
-        arrow
-        :show="!remote"
-        :disabled="disabled"
-        :active="active"
-        :clearable="clearable && selected"
-        @clear="handleClear"
-      />
     </template>
     <template v-if="multiple && filterable">
       <!-- multiple filterable -->
       <div
         ref="patternInputWrapper"
         class="n-base-picker-tags"
-        :tabindex="(disabled || active) ? false : '0'"
+        :tabindex="(disabled || patternInputFocused) ? false : '0'"
       >
         <div
           v-for="option in selectedOptions"
@@ -89,28 +90,29 @@
             class="n-base-picker-input-tag__mirror"
           >{{ pattern ? pattern : '&nbsp;' }}</span>
         </div>
+        <n-base-cancel-mark
+          ref="cancelMark"
+          class="n-base-picker__mark"
+          arrow
+          :show="!remote"
+          :disabled="disabled"
+          :active="active"
+          :clearable="clearable && selected"
+          @clear="handleClear"
+        />
       </div>
       <div
         class="n-base-picker__placeholder"
       >
         {{ placeholder }}
       </div>
-      <n-base-cancel-mark
-        class="n-base-picker__mark"
-        arrow
-        :show="!remote"
-        :disabled="disabled"
-        :active="active"
-        :clearable="clearable && selected"
-        @clear="handleClear"
-      />
     </template>
     <template v-else-if="!multiple && filterable">
       <!-- single filterable -->
       <div
         ref="patternInputWrapper"
         class="n-base-picker-label"
-        :tabindex="(!disabled && !active) ? '0' : false"
+        :tabindex="(!disabled && !patternInputFocused) ? '0' : false"
       >
         <input
           ref="patternInput"
@@ -124,47 +126,49 @@
           @blur="handlePatternInputBlur"
           @input="handlePatternInputInput"
         >
+        <n-base-cancel-mark
+          ref="cancelMark"
+          class="n-base-picker__mark"
+          arrow
+          :show="!remote"
+          :disabled="disabled"
+          :active="active"
+          :clearable="clearable && selected"
+          @clear="handleClear"
+        />
       </div>
-      <n-base-cancel-mark
-        class="n-base-picker__mark"
-        arrow
-        :show="!remote"
-        :disabled="disabled"
-        :active="active"
-        :clearable="clearable && selected"
-        @clear="handleClear"
-      />
     </template>
     <template v-else-if="!multiple && !filterable">
       <!-- single -->
       <div
+        ref="focusableEl2"
         class="n-base-picker-label"
         :tabindex="disabled ? false : '0'"
         @blur="handleBlur"
       >
         <div
+          v-if="label && label.length"
           class="n-base-picker-label__input"
-          :class="{
-            'n-base-picker-label__input--placeholder': !(label && label.length)
-          }"
         >
-          <template v-if="label && label.length">
-            {{ label }}
-          </template>
-          <template v-else>
-            {{ labelPlaceholder }}
-          </template>
+          {{ label }}
         </div>
+        <div
+          v-else
+          key="placeholder"
+          class="n-base-picker-label__input n-base-picker-label__input--placeholder"
+        >
+          {{ labelPlaceholder }}
+        </div>
+        <n-base-cancel-mark
+          class="n-base-picker__mark"
+          arrow
+          :show="!remote"
+          :disabled="disabled"
+          :active="active"
+          :clearable="clearable && selected"
+          @clear="handleClear"
+        />
       </div>
-      <n-base-cancel-mark
-        class="n-base-picker__mark"
-        arrow
-        :show="!remote"
-        :disabled="disabled"
-        :active="active"
-        :clearable="clearable && selected"
-        @clear="handleClear"
-      />
     </template>
   </div>
 </template>
@@ -269,8 +273,14 @@ export default {
       this.$emit('clear', e)
     },
     handleMouseDown (e) {
-      if (this.filterable && this.multiple && this.active) {
-        e.preventDefault()
+      if (!this.active) return
+      const filterableElKeys = ['focusableEl1', 'patternInputWrapper', 'patternInput', 'focusableEl2']
+      for (const key of filterableElKeys) {
+        const el = this.$refs[key]
+        if (el && document.hasFocus(el)) {
+          e.preventDefault()
+          break
+        }
       }
     },
     handleClick () {

packages/common/Select/src/BaseSelect.vue

@@ -376,7 +376,9 @@ export default {
     },
     handleClear (e) {
       e.stopPropagation()
-      this.closeMenu()
+      if (!this.multiple && this.filterable) {
+        this.closeMenu()
+      }
       this.$emit('input', null)
       this.emitChangeEvent(null)
     },
@@ -396,6 +398,11 @@ export default {
           this.handleToggleOption(pendingOption)
         } else {
           this.closeMenu()
+          this.$refs.activator.blurPatternInput()
+          this.$nextTick().then(() => {
+            this.$refs.activator.focusPatternInputWrapper()
+          })
+          //
         }
       } else {
         this.openMenu()
@@ -427,7 +434,10 @@ export default {
     handleKeyUpEsc (e) {
       this.closeMenu()
       this.$nextTick().then(() => {
-        this.$refs.activator.focusPatternInputWrapper()
+        this.$refs.activator.blurPatternInput()
+        this.$nextTick().then(() => {
+          this.$refs.activator.focusPatternInputWrapper()
+        })
       })
     }
   }

styles/BasePicker.scss

@@ -10,6 +10,7 @@
   display: inline-block;
   vertical-align: bottom;
   .n-base-picker__mark {
+    cursor: pointer;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -25,7 +26,7 @@
   }
   .n-base-picker-label, .n-base-picker-tags {
     cursor: pointer;
-    outline: none;
+    // outline: none;
     box-sizing: border-box;
     position: relative;
     transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
@@ -37,7 +38,8 @@
     width: 100%;
     vertical-align: bottom;
     .n-base-picker-label__input {
-      outline: none;
+      // outline: none;
+      cursor: pointer;
       box-sizing: border-box;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -103,6 +105,9 @@
       box-shadow: inset 0 0 0 1px $select-border-color--active, 0px 0px 10px 1px #366555;
       background-color: $select-background-color--active;
     }
+    .n-base-picker-input-tag {
+      width: unset;
+    }
   }
   &.n-base-picker--small-size {
     font-size: 14px;
@@ -202,7 +207,7 @@
   }
   &.n-base-picker--focus {
     .n-base-picker-label, .n-base-picker-tags {
-      box-shadow: inset 0 0 0 1px $select-border-color--active;      
+      box-shadow: inset 0 0 0 1px $select-border-color--active;
     }
   }
   &:not(.n-base-picker--disabled) {
@@ -216,16 +221,17 @@
 }
 
 @include b(base-picker-input-tag) {
-  outline: none;
+  // outline: none;
+  width: 0;
   position: relative;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
   display: inline-block;
   max-width: 100%;
   vertical-align: bottom;
   .n-base-picker-input-tag__input {
     padding: 0;
     background-color: transparent;
-    outline: none;
+    // outline: none;
     border: none;
     max-width: 100%;
     caret-color: $input-caret-color;

styles/mixins/mixins.scss

@@ -71,7 +71,7 @@ $block-depth: 0;
 $common-css-attrs-generated: false;
 $theme: null;
 $in-themes-mixin: false;
-$theme-names: "default", "light";
+$theme-names: "dark", "light";
 
 @mixin themes-mixin() {
   $in-themes-mixin: true !global;
@@ -86,7 +86,7 @@ $theme-names: "default", "light";
       @include setup-light-theme();
       @content;
       $theme: null !global;
-    } @else if $theme-name == 'default' {
+    } @else if $theme-name == 'dark' {
       $theme: $theme-name !global;
       @include setup-dark-theme();
       @content;