feat: update mentions

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'upload', // dev components
+    componentName: 'mentions', // dev components
   },
 };

components/input/Input.jsx

@@ -192,11 +192,6 @@ export default {
           keydown: this.handleKeyDown,
           change: noop,
         },
-        directives: [
-          {
-            name: 'ant-input',
-          },
-        ],
       };
       return <TextArea {...textareaProps} ref="input" />;
     }

components/input/ResizableTextArea.jsx

@@ -97,6 +97,11 @@ const ResizableTextArea = {
         style,
         class: cls,
         on: omit(getListeners(this), 'pressEnter'),
+        directives: [
+          {
+            name: 'ant-input',
+          },
+        ],
       };
       return (
         <ResizeObserver onResize={this.resizeOnNextFrame} disabled={!(autoSize || autosize)}>

components/mentions/__test__/__snapshots__/demo.test.js.snap

@@ -7,23 +7,23 @@ exports[`renders ./components/mentions/demo/basic.md correctly 1`] = `<div class
 exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
 <form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
-    <div class="ant-col-5 ant-form-item-label"><label for="mentions_coders" title="Top coders" class="">Top coders</label></div>
-    <div class="ant-col-12 ant-form-item-control-wrapper">
+    <div class="ant-col ant-col-5 ant-form-item-label"><label for="mentions_coders" title="Top coders" class="">Top coders</label></div>
+    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-mentions"><textarea rows="1" data-__meta="[object Object]" data-__field="[object Object]" id="mentions_coders"></textarea></div></span>
         <!---->
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col-5 ant-form-item-label"><label for="mentions_bio" title="Bio" class="ant-form-item-required">Bio</label></div>
-    <div class="ant-col-12 ant-form-item-control-wrapper">
+    <div class="ant-col ant-col-5 ant-form-item-label"><label for="mentions_bio" title="Bio" class="ant-form-item-required">Bio</label></div>
+    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-mentions"><textarea rows="3" placeholder="You can use @ to ref user here" data-__meta="[object Object]" data-__field="[object Object]" id="mentions_bio"></textarea></div></span>
         <!---->
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
+    <div class="ant-col ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
       <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 8px;"><span>Reset</span></button></span>
         <!---->
       </div>

components/mentions/demo/basic.md

@@ -11,7 +11,7 @@ Basic usage.
 ```tpl
 <template>
   <a-mentions
-    defaultValue="@afc163"
+    v-model="value"
     @change="onChange"
     @select="onSelect"
   >
@@ -22,6 +22,11 @@ Basic usage.
 </template>
 <script>
 export default {
+  data() {
+    return {
+      value: '@afc163',
+    }
+  },
   methods: {
     onSelect(option) {
       console.log('select', option);

components/vc-mentions/src/DropdownMenu.jsx

@@ -2,6 +2,7 @@ import Menu, { MenuItem } from '../../vc-menu';
 import PropTypes from '../../_util/vue-types';
 import { OptionProps } from './Option';
 
+function noop() {}
 export default {
   name: 'DropdownMenu',
   props: {
@@ -18,8 +19,8 @@ export default {
       activeIndex,
       setActiveIndex,
       selectOption,
-      onFocus,
-      onBlur,
+      onFocus = noop,
+      onBlur = noop,
     } = this.mentionsContext;
     const { prefixCls, options } = this.$props;
     const activeOption = options[activeIndex] || {};

components/vc-mentions/src/Mentions.jsx

@@ -2,7 +2,6 @@ import omit from 'omit.js';
 import KeyCode from '../../_util/KeyCode';
 import BaseMixin from '../../_util/BaseMixin';
 import {
-  getStyle,
   getSlots,
   hasProp,
   getOptionProps,
@@ -73,7 +72,8 @@ const Mentions = {
       }
       this.$emit('change', value);
     },
-    onChange({ target: { value } }) {
+    onChange({ target: { value, composing } }) {
+      if (composing) return;
       this.triggerChange(value);
     },
     onKeyDown(event) {
@@ -283,6 +283,7 @@ const Mentions = {
         <textarea
           ref="textarea"
           {...{
+            directives: [{ name: 'ant-input' }],
             attrs: { ...inputProps, ...this.$attrs },
             domProps: {
               value,