fix: the handwritten keyboard does not trigger input change (#1200)

example/pages/field/index.js

@@ -16,5 +16,20 @@ Page({
       icon: 'none',
       title: '点击图标'
     });
+  },
+
+  onFieldChange({ detail }) {
+    console.log('change', detail);
+    this.setData({
+      sms: detail
+    });
+  },
+
+  onFieldBlur({ detail }) {
+    console.log('blur', detail);
+  },
+
+  onSendSms() {
+    console.log('onSendSms', this.data.sms);
   }
 });

example/pages/field/index.wxml

@@ -81,8 +81,10 @@
       placeholder="请输入短信验证码"
       use-button-slot
       border="{{ false }}"
+      bind:change="onFieldChange"
+      bind:blur="onFieldBlur"
     >
-      <van-button slot="button" size="small" type="primary" custom-class="button">发送验证码</van-button>
+      <van-button slot="button" size="small" type="primary" custom-class="button" bind:tap="onSendSms">发送验证码</van-button>
     </van-field>
   </van-cell-group>
 </demo-block>

packages/field/index.ts

@@ -76,8 +76,7 @@ VantComponent({
         value,
         showClear: this.getShowClear(value)
       }, () => {
-        this.$emit('input', value);
-        this.$emit('change', value);
+        this.emitChange(value);
       });
     },
 
@@ -85,6 +84,7 @@ VantComponent({
       const { value = '', height = 0 } = event.detail || {};
       this.$emit('focus', { value, height });
       this.focused = true;
+      this.blurFromClear = false;
       this.set({
         showClear: this.getShowClear()
       });
@@ -94,9 +94,21 @@ VantComponent({
       const { value = '', cursor = 0 } = event.detail || {};
       this.$emit('blur', { value, cursor });
       this.focused = false;
+      const showClear = this.getShowClear();
+
+      if (this.data.value === value) {
         this.set({
-        showClear: this.getShowClear()
+          showClear
         });
+      } else if (!this.blurFromClear) {
+        // fix: the handwritten keyboard does not trigger input change
+        this.set({
+          value,
+          showClear
+        }, () => {
+          this.emitChange(value);
+        });
+      }
     },
 
     onClickIcon() {
@@ -111,18 +123,23 @@ VantComponent({
     },
 
     onClear() {
+      this.blurFromClear = true;
       this.set({
         value: '',
         showClear: this.getShowClear('')
       }, () => {
-        this.$emit('input', '');
-        this.$emit('change', '');
+        this.emitChange('');
         this.$emit('clear', '');
       });
     },
 
     onConfirm() {
       this.$emit('confirm', this.data.value);
+    },
+
+    emitChange(value) {
+      this.$emit('input', value);
+      this.$emit('change', value);
     }
   }
 });