Merge pull request #329 from geff1991/develop

fix(select): fix issuse 128，分组搜索展示相关

examples/select/demos/group.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tdesign-demo-select-base">
     <!-- 方式一：直接传 options 数据，比插槽的方式更简单 -->
-    <t-select v-model="value1" :options="options" placeholder="请选择" />
+    <t-select v-model="value1" :options="options" placeholder="请选择" filterable />
 
     <!-- 方式二：使用插槽节点 -->
-    <t-select v-model="value2" placeholder="请选择">
+    <t-select v-model="value2" placeholder="请选择" filterable>
       <t-option-group
         v-for="(list, index) in options"
         :key="index"
@@ -28,10 +28,7 @@ export default {
       options: [
         {
           group: '分组一',
-          children: [
-            { label: '选项一', value: 1 },
-            { label: '选项二', value: 2 },
-          ],
+          children: [],
         },
         {
           group: '分组二',

examples/select/demos/remote-search.vue

@@ -7,7 +7,7 @@
       :onSearch="remoteMethod"
       :loading="loading"
       :options="options"
-      style="width: 200px;display: inline-block;margin: 0 20px 20px 0;"
+      style="width: 200px; display: inline-block; margin: 0 20px 20px 0"
     />
     <t-select
       v-model="value2"
@@ -18,7 +18,7 @@
       @search="remoteMethod2"
       :loading="loading2"
       reserveKeyword
-      style="width: 400px;display: inline-block;"
+      style="width: 400px; display: inline-block"
     />
   </div>
 </template>
@@ -45,41 +45,45 @@ export default {
     },
     remoteMethod(search) {
       console.log('search', search);
-      if (search) {
-        this.loading = true;
-        setTimeout(() => {
-          this.loading = false;
-          this.options = [{
-            value: `${search}_test1`,
-            label: `${search}_test1`,
-          }, {
-            value: `${search}_test2`,
-            label: `${search}_test2`,
-          }, {
-            value: `${search}_test3`,
-            label: `${search}_test3`,
-          }];
-        }, 500);
-      }
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+        this.options = [
+          {
+            value: `${search}test1`,
+            label: `${search}test1`,
+          },
+          {
+            value: `${search}test2`,
+            label: `${search}test2`,
+          },
+          {
+            value: `${search}test3`,
+            label: `${search}test3`,
+          },
+        ];
+      }, 500);
     },
     remoteMethod2(search) {
       console.log('search2', search);
-      if (search) {
-        this.loading2 = true;
-        setTimeout(() => {
-          this.loading2 = false;
-          this.options2 = [{
-            value: `${search}_test1`,
-            label: `${search}_test1`,
-          }, {
-            value: `${search}_test2`,
-            label: `${search}_test2`,
-          }, {
-            value: `${search}_test3`,
-            label: `${search}_test3`,
-          }];
-        }, 500);
-      }
+      this.loading2 = true;
+      setTimeout(() => {
+        this.loading2 = false;
+        this.options2 = [
+          {
+            value: `${search}test1`,
+            label: `${search}test1`,
+          },
+          {
+            value: `${search}test2`,
+            label: `${search}test2`,
+          },
+          {
+            value: `${search}test3`,
+            label: `${search}test3`,
+          },
+        ];
+      }, 500);
     },
   },
 };

src/select/optionGroup.tsx

@@ -5,12 +5,14 @@ import { prefix } from '../config';
 import CLASSNAMES from '../utils/classnames';
 import props from './option-group-props';
 import { ClassName } from '../common';
+import { TdOptionProps } from './type';
 
 const name = `${prefix}-select-option-group`;
 
 export interface Select extends Vue {
   tSelect: {
     size: string;
+    displayOptions: Array<TdOptionProps>;
   };
 }
 
@@ -33,10 +35,27 @@ export default (Vue as VueConstructor<Select>).extend({
       ];
     },
   },
+  watch: {
+    'tSelect.displayOptions': function () {
+      this.childrenChange();
+    },
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  methods: {
+    childrenChange() {
+      this.visible = this.$children
+        && Array.isArray(this.$children)
+        && this.$children.some((option) => (option as any).show === true);
+    },
+  },
   render(): VNode {
     const children: ScopedSlotReturnValue = renderTNodeJSX(this, 'default');
     return (
-      <li class={this.classes}>
+      <li v-show={this.visible} class={this.classes}>
         <div class={`${name}__header`}>{this.label}</div>
         <ul>{children}</ul>
       </li>

src/select/select.tsx

@@ -264,6 +264,7 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
       }
     },
     searchInput(val) {
+      if (!val && !this.visible) return;
       if (isFunction(this.onSearch) || this.$listeners.search) {
         this.debounceOnRemote();
       }
@@ -287,7 +288,6 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
     visible() {
       this.visible && document.addEventListener('keydown', this.keydownEvent);
       !this.visible && document.removeEventListener('keydown', this.keydownEvent);
-      this.visible && Array.isArray(this.hoverOptions) && this.initHoverindex();
     },
   },
   methods: {
@@ -320,10 +320,6 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
     },
     visibleChange(val: boolean) {
       emitEvent<Parameters<TdSelectProps['onVisibleChange']>>(this, 'visible-change', val);
-      if (this.focusing && !val) {
-        this.visible = true;
-        return;
-      }
       this.visible = val;
       if (!val) {
         this.searchInput = '';
@@ -464,6 +460,10 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
       }
       switch (e.code) {
         case 'ArrowDown':
+          if (this.hoverIndex === -1) {
+            this.initHoverindex();
+            return;
+          }
           if (this.hoverIndex < this.hoverOptions.length - 1) {
             this.hoverIndex += 1;
             this.arrowDownOption();
@@ -473,6 +473,10 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
           }
           break;
         case 'ArrowUp':
+          if (this.hoverIndex === -1) {
+            this.initHoverindex();
+            return;
+          }
           if (this.hoverIndex > 0) {
             this.hoverIndex -= 1;
             this.arrowUpOption();
@@ -603,7 +607,7 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
           {options.map((groupList: SelectOptionGroup) => {
             const children = groupList.children.filter((item) => this.displayOptionsMap.get(item));
             return (
-              <t-option-group label={groupList.group} divider={groupList.divider}>
+              <t-option-group v-show={children.length} label={groupList.group} divider={groupList.divider}>
                 {this.renderOptions(children)}
               </t-option-group>
             );

src/tree-select/tree-select.tsx

@@ -228,10 +228,6 @@ export default mixins(getConfigReceiverMixins<Vue, TreeSelectConfig>('treeSelect
   },
   methods: {
     async popupVisibleChange(visible: boolean) {
-      if (this.focusing && !visible) {
-        this.visible = true;
-        return;
-      }
       await (this.visible = visible);
       if (this.showFilter && this.visible) {
         const searchInput = this.$refs.input as HTMLElement;

test/ssr/__snapshots__/ssr.test.js.snap

@@ -9037,17 +9037,21 @@ exports[`ssr snapshot test renders ./examples/select/demos/group.vue correctly 1
   <div class="t-select__wrap">
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
-      <div class="t-select t-size-m"><span class="t-select__placeholder"> 请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+      <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg></div>
+        </svg>
+      </div>
     </div>
   </div>
   <div class="t-select__wrap">
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
-      <div class="t-select t-size-m"><span class="t-select__placeholder"> 请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+      <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
-        </svg></div>
+        </svg>
+      </div>
     </div>
   </div>
 </div>