fix: select input width

Author: tangjinzhou

antdv-demo

@@ -1,12 +1,11 @@
 import ref from 'vue-ref';
-import { antInput } from './antInputDirective';
+// import { antInput } from './antInputDirective';
 import { antDecorator } from './FormDecoratorDirective';
 import { antPortal } from './portalDirective';
 
 export default {
   install: Vue => {
     Vue.use(ref, { name: 'ant-ref' });
-    antInput(Vue);
     antDecorator(Vue);
     antPortal(Vue);
   },

components/_util/antDirective.js

@@ -44,30 +44,29 @@ if (isIE9) {
   });
 }
 
-export function antInput(Vue) {
-  return Vue.directive('ant-input', {
-    inserted(el, binding, vnode) {
-      if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
-        if (!binding.modifiers || !binding.modifiers.lazy) {
-          el.addEventListener('compositionstart', onCompositionStart);
-          el.addEventListener('compositionend', onCompositionEnd);
-          // Safari < 10.2 & UIWebView doesn't fire compositionend when
-          // switching focus before confirming composition choice
-          // this also fixes the issue where some browsers e.g. iOS Chrome
-          // fires "change" instead of "input" on autocomplete.
-          el.addEventListener('change', onCompositionEnd);
-          /* istanbul ignore if */
-          if (isIE9) {
-            el.vmodel = true;
-          }
+export const antInput = {
+  mounted(el, binding, vnode) {
+    if (vnode.type === 'textarea' || isTextInputType(el.type)) {
+      if (!binding.modifiers || !binding.modifiers.lazy) {
+        el.addEventListener('compositionstart', onCompositionStart);
+        el.addEventListener('compositionend', onCompositionEnd);
+        // Safari < 10.2 & UIWebView doesn't fire compositionend when
+        // switching focus before confirming composition choice
+        // this also fixes the issue where some browsers e.g. iOS Chrome
+        // fires "change" instead of "input" on autocomplete.
+        el.addEventListener('change', onCompositionEnd);
+        /* istanbul ignore if */
+        if (isIE9) {
+          el.vmodel = true;
         }
       }
-    },
-  });
-}
+    }
+  },
+};
 
 export default {
-  install: Vue => {
-    antInput(Vue);
+  install: app => {
+    antInput(app);
+    app.directive('ant-input', antInput);
   },
 };

components/_util/antInputDirective.js

@@ -5,4 +5,7 @@ export default {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   },
   isSelectOptGroup: true,
+  render() {
+    return null;
+  },
 };

components/vc-select/OptGroup.jsx

@@ -8,4 +8,7 @@ export default {
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   },
   isSelectOption: true,
+  render() {
+    return null;
+  },
 };

components/vc-select/Option.jsx

@@ -1,4 +1,4 @@
-import {TransitionGroup} from 'vue';
+import { TransitionGroup } from 'vue';
 import KeyCode from '../_util/KeyCode';
 import PropTypes from '../_util/vue-types';
 import classnames from 'classnames';
@@ -149,7 +149,7 @@ const Select = {
     };
     return {
       ...state,
-      _mirrorInputValue: state._inputValue, // https://github.com/vueComponent/ant-design-vue/issues/1458
+      // _mirrorInputValue: state._inputValue, // https://github.com/vueComponent/ant-design-vue/issues/1458
       ...this.getDerivedState(props, state),
     };
   },
@@ -170,22 +170,10 @@ const Select = {
     __propsSymbol__() {
       Object.assign(this.$data, this.getDerivedState(getOptionProps(this), this.$data));
     },
-    _inputValue(val) {
-      this.$data._mirrorInputValue = val;
-    },
   },
   updated() {
     this.$nextTick(() => {
-      if (isMultipleOrTags(this.$props)) {
-        const inputNode = this.getInputDOMNode();
-        const mirrorNode = this.getInputMirrorDOMNode();
-        if (inputNode && inputNode.value && mirrorNode) {
-          inputNode.style.width = '';
-          inputNode.style.width = `${mirrorNode.clientWidth + 10}px`;
-        } else if (inputNode) {
-          inputNode.style.width = '';
-        }
-      }
+      this.updateInputWidth();
       this.forcePopupAlign();
     });
   },
@@ -199,6 +187,18 @@ const Select = {
     }
   },
   methods: {
+    updateInputWidth() {
+      if (isMultipleOrTags(this.$props)) {
+        const inputNode = this.getInputDOMNode();
+        const mirrorNode = this.getInputMirrorDOMNode();
+        if (inputNode && inputNode.value && mirrorNode) {
+          inputNode.style.width = '';
+          inputNode.style.width = `${mirrorNode.clientWidth + 10}px`;
+        } else if (inputNode) {
+          inputNode.style.width = '';
+        }
+      }
+    },
     getDerivedState(nextProps, prevState) {
       const optionsInfo = prevState._skipBuildOptionsInfo
         ? prevState._optionsInfo
@@ -310,14 +310,7 @@ const Select = {
     },
 
     onInputChange(e) {
-      const { value: val, composing } = e.target;
-      const { _inputValue = '' } = this.$data;
-      if (e.isComposing || composing || _inputValue === val) {
-        this.setState({
-          _mirrorInputValue: val,
-        });
-        return;
-      }
+      const { value: val } = e.target;
       const { tokenSeparators } = this.$props;
       if (
         isMultipleOrTags(this.$props) &&
@@ -639,20 +632,14 @@ const Select = {
     getPlaceholderElement() {
       const { $props: props, $data: state } = this;
       let hidden = false;
-      if (state._mirrorInputValue) {
+      if (state._inputValue) {
         hidden = true;
       }
       const value = state._value;
       if (value.length) {
         hidden = true;
       }
-      if (
-        !state._mirrorInputValue &&
-        isCombobox(props) &&
-        value.length === 1 &&
-        state._value &&
-        !state._value[0]
-      ) {
+      if (isCombobox(props) && value.length === 1 && state._value && !state._value[0]) {
         hidden = false;
       }
       const placeholder = props.placeholder;
@@ -781,9 +768,11 @@ const Select = {
     },
     _getInputElement() {
       const props = this.$props;
-      const { _inputValue: inputValue, _mirrorInputValue } = this.$data;
+      const { _inputValue: inputValue } = this.$data;
       const attrs = this.$attrs;
-      const defaultInput = <input {...(attrs.id !== undefined ? {id: attrs.id}: {})} autoComplete="off"/>;
+      const defaultInput = (
+        <input {...(attrs.id !== undefined ? { id: attrs.id } : {})} autoComplete="off" />
+      );
 
       const inputElement = props.getInputElement ? props.getInputElement() : defaultInput;
       const inputCls = classnames(inputElement.class, {
@@ -816,7 +805,7 @@ const Select = {
             onBlur: chaining(this.inputBlur, inputEvents.onBlur),
           })}
           <span ref={this.saveInputMirrorRef} class={`${props.prefixCls}-search__field__mirror`}>
-            {_mirrorInputValue}&nbsp;
+            {inputValue}&nbsp;
           </span>
         </div>
       );
@@ -1206,7 +1195,7 @@ const Select = {
             });
 
             sel.push(
-              <MenuItemGroup key={key} title={label} class={child.props?.class}>
+              <MenuItemGroup key={key} title={label} class={child.props && child.props.class}>
                 {...innerItems}
               </MenuItemGroup>,
             );
@@ -1411,9 +1400,7 @@ const Select = {
             tag: 'ul',
             onAfterLeave: this.onChoiceAnimationLeave,
           });
-          innerNode = (
-            <TransitionGroup {...transitionProps}>{selectedValueNodes}</TransitionGroup>
-          );
+          innerNode = <TransitionGroup {...transitionProps}>{selectedValueNodes}</TransitionGroup>;
         } else {
           innerNode = <ul>{selectedValueNodes}</ul>;
         }

components/vc-select/Select.jsx

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/select/demo/tags';
+import demo from '../antdv-demo/docs/auto-complete/demo/index';
 
 export default {
   components: {

examples/App.vue

@@ -152,7 +152,7 @@
     "terser-webpack-plugin": "^3.0.3",
     "through2": "^3.0.0",
     "url-loader": "^3.0.0",
-    "vue": "^3.0.0-beta.17",
+    "vue": "^3.0.0-beta.18",
     "vue-antd-md-loader": "^1.1.0",
     "vue-clipboard2": "0.3.1",
     "vue-draggable-resizable": "^2.1.0",