小程序input无法清空bug

场景

小程序使用原生input组件聚焦时，点击清空按钮无法清除内容(需在真机上操作)

wxml

<input type="text" 
    value='{{inputTxt}}' 
    bindinput="handleInputChange" />
    
<icon wx:if="{{inputTxt !=''}}"
    type="clear"
    size="14" 
    color="gray" 
    bindtap='handleClear' />

js

handleClear: function() {
    this.setData({
        inputTxt: ''
    })
},
handleInputChange:function(event){
    let value = event.detail.value
    this.setData({
      inputTxt: value
    })
}

原因

小程序原生的input在失去焦点的时候会触发一次input事件

1. 点击按钮触发handleClear，执行setData清空操作
2. input失去焦点，触发input事件，执行setData赋值操作；但此时第1步的清空操作还没渲染到dom节点上，使得event.detail.value取的仍然是未清空之前的值

解决方案

1. flag

handleClear: function() {
    this.setData({
        inputTxt: '',
        clearFlag: true
    }, () => {
        this.setData({
            clearFlag: false
        })
    })
},
handleInputChange:function(event){
    if (!clearFlag) {
        let value = event.detail.value
        this.setData({
          inputTxt: value
        })
    }
}

2. setTimeout延迟

handleClear: function() {
    setTimeout({
        this.setData({
            inputTxt: ''
        })
    }, 300)
},
handleInputChange:function(event){
    let value = event.detail.value
    this.setData({
      inputTxt: value
    })
}

3. 隐藏键盘

handleClear: function() {
    if (wx.canIUse('hideKeyboard')) {
        wx.hideKeyboard({
            complete: () => {
                this.setData({
                    inputTxt: ''
                })
            }
        })
    } else {
        this.setData({
            inputTxt: '',
            clearFlag: true
        }, () => {
            this.setData({
                clearFlag: false
            })
        })
    }
},
handleInputChange:function(event){
    if (!clearFlag) {
        let value = event.detail.value
        this.setData({
          inputTxt: value
        })
    }
}