fix(Select): could add tag while popup not visible

alibaba-fusion · Feb 1, 2019 · 662a959 · 662a959
1 parent 93b2fd7
commit 662a959
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 18 deletions.
diff --git a/docs/select/index.md b/docs/select/index.md
@@ -70,7 +70,7 @@ const dataSource = [
 | placeholder           | 没有值的时候的占位符                                                                                                                                                                                                                                                | String                                 | -                                  |
 | autoWidth             | 下拉菜单是否与选择器对齐                                                                                                                                                                                                                                              | Boolean                                | true                               |
 | label                 | 自定义内联 label                                                                                                                                                                                                                                               | ReactNode                              | -                                  |
-| hasClear              | 是否有清除按钮                                                                                                                                                                                                                                                   | Boolean                                | -                                  |
+| hasClear              | 是否有清除按钮（单选模式有效）                                                                                                                                                                                                                                           | Boolean                                | -                                  |
 | state                 | 校验状态<br><br>**可选值**:<br>'error', 'loading'                                                                                                                                                                                                                | Enum                                   | -                                  |
 | readOnly              | 是否只读，只读模式下可以展开弹层但不能选                                                                                                                                                                                                                                      | Boolean                                | -                                  |
 | disabled              | 是否禁用选择器                                                                                                                                                                                                                                                   | Boolean                                | -                                  |
@@ -117,7 +117,7 @@ const dataSource = [
 | placeholder           | 没有值的时候的占位符                                                                                                                                                                                                                          | String                  | -         |
 | autoWidth             | 下拉菜单是否与选择器对齐                                                                                                                                                                                                                        | Boolean                 | true      |
 | label                 | 自定义内联 label                                                                                                                                                                                                                         | ReactNode               | -         |
-| hasClear              | 是否有清除按钮                                                                                                                                                                                                                             | Boolean                 | -         |
+| hasClear              | 是否有清除按钮（单选模式有效）                                                                                                                                                                                                                     | Boolean                 | -         |
 | state                 | 校验状态<br><br>**可选值**:<br>'error', 'loading'                                                                                                                                                                                          | Enum                    | -         |
 | readOnly              | 是否只读，只读模式下可以展开弹层但不能选                                                                                                                                                                                                                | Boolean                 | -         |
 | disabled              | 是否禁用选择器                                                                                                                                                                                                                             | Boolean                 | -         |

diff --git a/src/select/base.jsx b/src/select/base.jsx
@@ -42,7 +42,7 @@ export default class Base extends React.Component {
          */
         label: PropTypes.node,
         /**
-         * 是否有清除按钮
+         * 是否有清除按钮（单选模式有效）
          */
         hasClear: PropTypes.bool,
         /**

diff --git a/src/select/select.jsx b/src/select/select.jsx
@@ -454,10 +454,33 @@ class Select extends Base {
         onKeyDown(e);
     }
 
+    chooseMultipleItem(key) {
+        const value = this.state.value || [];
+        const keys = value.map(v => {
+            return valueToSelectKey(v);
+        });
+
+        const index = keys.map(v => `${v}`).indexOf(key);
+
+        if (index > -1) { // unselect
+            keys.splice(index, 1);
+        } else { // select
+            keys.push(key);
+        }
+
+        this.handleMultipleSelect(keys, 'enter');
+    }
+
     // 回车 选择高亮的 item
     chooseHighlightItem(proxy, e) {
         const prevVisible = this.state.visible;
+        const { mode } = this.props;
+
         if (!prevVisible) {
+            // input tag by itself
+            if (mode === 'tag' && this.state.searchValue) {
+                this.chooseMultipleItem(this.state.searchValue);
+            }
             return false;
         }
 
@@ -468,22 +491,10 @@ class Select extends Base {
             return;
         }
 
-        const { mode } = this.props;
-
         if (mode === 'single') {
             this.handleSingleSelect(highlightKey, 'enter');
         } else {
-            const value = this.state.value || [];
-            const keys = value.map(v => {
-                return valueToSelectKey(v);
-            });
-            const index = keys.map(v => `${v}`).indexOf(highlightKey);
-            if (index > -1) { // 反选
-                keys.splice(index, 1);
-            } else { // 勾选
-                keys.push(highlightKey);
-            }
-            this.handleMultipleSelect(keys, 'enter');
+            this.chooseMultipleItem(highlightKey);
             // 阻止事件冒泡到最外层，让Popup 监听到触发弹层关闭
             e && e.stopPropagation();
         }
@@ -674,7 +685,7 @@ class Select extends Base {
                 type="arrow-down" /></span>);
         }
 
-        // 不能使用 this.hasClear() 方法判断，要保证 clear 按钮 dom 结构一直存在，防止其不能成为弹层的安全节点，导致弹层没有必要的显示或隐藏
+        // do not use this.hasClear() here, to make sure clear btn always exists, can not influenced by apis like `disabled` `readOnly`
         if (hasClear) {
             ret.push(<span key="clear" onClick={this.handleClear} className={`${prefix}select-clear`}><Icon
                 type="delete-filling" /></span>);

diff --git a/test/select/index-spec.js b/test/select/index-spec.js
@@ -352,7 +352,23 @@ describe('Select', () => {
         wrapper.find('div.next-tag .next-tag-close-btn').simulate('click');
     });
 
-    it('should support clear', (done) => {
+    it('should support mode=tag with visible=false', (done) => {
+        wrapper.setProps({
+            mode: 'tag',
+            visible: false,
+            value: ['yyy'],
+            onChange: function (value) {
+                assert(value.length === 2);
+                assert(value[1] === 'bbb');
+                done();
+            }
+        });
+
+        wrapper.find('input').simulate('change', {target: {value: 'bbb'}});
+        wrapper.find('input').simulate('keydown', {keyCode: 13});
+    });
+
+    it('should support mode=tag with hasClear', (done) => {
         wrapper.setProps({
             mode: 'tag',
             hasClear: true,