fix: input compositionend not trigger change

Author: tangjinzhou

components/input/ResizableTextArea.jsx

@@ -8,6 +8,8 @@ import BaseMixin from '../_util/BaseMixin';
 import inputProps from './inputProps';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps } from '../_util/props-util';
+import { withDirectives } from 'vue';
+import antInput from '../_util/antInputDirective';
 
 const RESIZE_STATUS_NONE = 0;
 const RESIZE_STATUS_RESIZING = 1;
@@ -139,7 +141,7 @@ const ResizableTextArea = {
       }
       return (
         <ResizeObserver onResize={this.handleResize} disabled={!(autoSize || autosize)}>
-          <textarea {...textareaProps} ref={this.saveTextArea} />
+          {withDirectives(<textarea {...textareaProps} ref={this.saveTextArea} />, [[antInput]])}
         </ResizeObserver>
       );
     },

components/vc-calendar/src/date/DateInput.jsx

@@ -4,6 +4,8 @@ import { getComponent, findDOMNode } from '../../../_util/props-util';
 import moment from 'moment';
 import { formatDate } from '../util';
 import KeyCode from '../../../_util/KeyCode';
+import { withDirectives } from 'vue';
+import antInput from '../../../_util/antInputDirective';
 
 let cachedSelectionStart;
 let cachedSelectionEnd;
@@ -193,20 +195,23 @@ const DateInput = {
     return (
       <div class={`${prefixCls}-input-wrap`}>
         <div class={`${prefixCls}-date-input-wrap`}>
-          <input
-            ref={this.saveDateInput}
-            class={`${prefixCls}-input ${invalidClass}`}
-            value={str}
-            disabled={disabled}
-            placeholder={placeholder}
-            onInput={this.onInputChange}
-            onChange={this.onInputChange}
-            onKeydown={this.onKeyDown}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            inputMode={inputMode}
-            readonly={inputReadOnly}
-          />
+          {withDirectives(
+            <input
+              ref={this.saveDateInput}
+              class={`${prefixCls}-input ${invalidClass}`}
+              value={str}
+              disabled={disabled}
+              placeholder={placeholder}
+              onInput={this.onInputChange}
+              onChange={this.onInputChange}
+              onKeydown={this.onKeyDown}
+              onFocus={this.onFocus}
+              onBlur={this.onBlur}
+              inputMode={inputMode}
+              readonly={inputReadOnly}
+            />,
+            [[antInput]],
+          )}
         </div>
         {showClear ? (
           <a role="button" title={locale.clear} onClick={this.onClear}>

components/vc-mentions/src/Mentions.jsx

@@ -1,4 +1,4 @@
-import { provide } from 'vue';
+import { provide, withDirectives } from 'vue';
 import classNames from '../../_util/classNames';
 import omit from 'omit.js';
 import KeyCode from '../../_util/KeyCode';
@@ -13,6 +13,7 @@ import {
 } from './util';
 import KeywordTrigger from './KeywordTrigger';
 import { vcMentionsProps, defaultProps } from './mentionsProps';
+import antInput from '../../_util/antInputDirective';
 
 function noop() {}
 
@@ -286,7 +287,7 @@ const Mentions = {
     };
     return (
       <div class={classNames(prefixCls, className)} style={style}>
-        <textarea ref="textarea" {...textareaProps} />
+        {withDirectives(<textarea ref="textarea" {...textareaProps} />, [[antInput]])}
         {measuring && (
           <div ref="measure" class={`${prefixCls}-measure`}>
             {value.slice(0, measureLocation)}

components/vc-pagination/Options.jsx

@@ -1,6 +1,8 @@
 import PropTypes from '../_util/vue-types';
 import KEYCODE from './KeyCode';
 import BaseMixin from '../_util/BaseMixin';
+import { withDirectives } from 'vue';
+import antInput from '../_util/antInputDirective';
 
 export default {
   mixins: [BaseMixin],
@@ -131,15 +133,18 @@ export default {
       goInput = (
         <div class={`${prefixCls}-quick-jumper`}>
           {locale.jump_to}
-          <input
-            disabled={disabled}
-            type="text"
-            value={goInputText}
-            onInput={this.handleChange}
-            onChange={this.handleChange}
-            onKeyup={this.go}
-            onBlur={this.handleBlur}
-          />
+          {withDirectives(
+            <input
+              disabled={disabled}
+              type="text"
+              value={goInputText}
+              onInput={this.handleChange}
+              onChange={this.handleChange}
+              onKeyup={this.go}
+              onBlur={this.handleBlur}
+            />,
+            [[antInput]],
+          )}
           {locale.page}
           {gotoButton}
         </div>

components/vc-pagination/Pagination.jsx

@@ -6,6 +6,8 @@ import Options from './Options';
 import LOCALE from './locale/zh_CN';
 import KEYCODE from './KeyCode';
 import classNames from '../_util/classNames';
+import { withDirectives } from 'vue';
+import antInput from '../_util/antInputDirective';
 
 function noop() {}
 
@@ -379,15 +381,18 @@ export default {
             title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
             class={`${prefixCls}-simple-pager`}
           >
-            <input
-              type="text"
-              value={this.stateCurrentInputValue}
-              onKeydown={this.handleKeyDown}
-              onKeyup={this.handleKeyUp}
-              onInput={this.handleKeyUp}
-              onChange={this.handleKeyUp}
-              size="3"
-            />
+            {withDirectives(
+              <input
+                type="text"
+                value={this.stateCurrentInputValue}
+                onKeydown={this.handleKeyDown}
+                onKeyup={this.handleKeyUp}
+                onInput={this.handleKeyUp}
+                onChange={this.handleKeyUp}
+                size="3"
+              />,
+              [[antInput]],
+            )}
             <span class={`${prefixCls}-slash`}>／</span>
             {allPages}
           </li>

components/vc-time-picker/Header.jsx

@@ -1,6 +1,8 @@
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import moment from 'moment';
+import { withDirectives } from 'vue';
+import antInput from '../_util/antInputDirective';
 
 const Header = {
   inheritAttrs: false,
@@ -159,7 +161,7 @@ const Header = {
     getInput() {
       const { prefixCls, placeholder, inputReadOnly, invalid, str } = this;
       const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
-      return (
+      return withDirectives(
         <input
           class={`${prefixCls}-input ${invalidClass}`}
           ref={ref => {
@@ -171,7 +173,8 @@ const Header = {
           onInput={this.onInputChange}
           onChange={this.onInputChange}
           readonly={!!inputReadOnly}
-        />
+        />,
+        [[antInput]],
       );
     },
   },

components/vc-tree-select/src/SearchInput.jsx

@@ -4,7 +4,8 @@
  * - multiple: in the selector
  * Move the code as a SearchInput for easy management.
  */
-import { inject } from 'vue';
+import { inject, withDirectives } from 'vue';
+import antInput from '../../_util/antInputDirective';
 import PropTypes from '../../_util/vue-types';
 import { createRef } from './util';
 
@@ -118,20 +119,23 @@ const SearchInput = {
     } = this;
     return (
       <span class={`${prefixCls}-search__field__wrap`}>
-        <input
-          type="text"
-          ref={this.inputRef}
-          onInput={handleInputChange}
-          onChange={handleInputChange}
-          onKeydown={onSearchInputKeyDown}
-          value={searchValue}
-          disabled={disabled}
-          class={`${prefixCls}-search__field`}
-          aria-label="filter select"
-          aria-autocomplete="list"
-          aria-controls={open ? ariaId : undefined}
-          aria-multiline="false"
-        />
+        {withDirectives(
+          <input
+            type="text"
+            ref={this.inputRef}
+            onInput={handleInputChange}
+            onChange={handleInputChange}
+            onKeydown={onSearchInputKeyDown}
+            value={searchValue}
+            disabled={disabled}
+            class={`${prefixCls}-search__field`}
+            aria-label="filter select"
+            aria-autocomplete="list"
+            aria-controls={open ? ariaId : undefined}
+            aria-multiline="false"
+          />,
+          [[antInput]],
+        )}
         <span ref={this.mirrorInputRef} class={`${prefixCls}-search__field__mirror`}>
           {mirrorSearchValue}&nbsp;
         </span>