WeChat Mini Programs input out of focus abnormality

< H2 > 1. Problem description < / H2 >

when the page is initially opened, the input box is automatically focused, and the event is automatically triggered for business processing after entering n digits. The result is displayed in the form of a pop-up box at the bottom of the page, and the input is out of focus at the same time.
but the current problem is that after the bottom pop-up box appears, the input gets focus again, causing the keyboard to pop up and block the bottom pop-up box.
this problem occurs only when you just enter the page, keep it on the current page, and everything will be fine the second time you enter it.

< H2 > 2. Corresponding screenshot < / H2 >

normal
clipboard.png


clipboard.png


clipboard.png

< H2 > 3. Code snippet < / H2 >
<input type="number" focus="{{focus && !blurFlag}}" value="{{doSomthing}}" bindinput="inputNum" bindfocus="bindfocus" bindblur="bindblur"/>
<view class="mask" wx:if="{{showModal}}"></view>
<view class="modal {{ modalTypeMap[modalType] }}" hidden="{{!showModal}}">
    <view>{{ msg }}</view>
</view>

doSomething(e) {
    this.setData({
      fetchCode: e.detail.value,
      blurFlag: false,
    })
    if (e.detail.value.length === 11) {
      this.setData({
        focus: false,
        blurFlag: true,
      })
      this.loadOrder()
    }
  }
loadOrder(e) {
    if (this.data.fetchCode.length === 11) {
      app.request()
        .header("content-type", "application/json")
        .post(url)
        .query({
          token: app.get("token")
        })
        .send(params)
        .end()
        .then(res => res.body)
        .then(({code, data}) => {
          if ( code === 200) {
            let modalType = 1
            let msg = this.data.msg
            if (data.success) {
              modalType = 1
            } else {
              modalType = 3,
              msg = data.failReason
            }
            this.setData({
              focus: false,
              modalType: modalType,
              msg: msg,
              showModal: true,
            })
          }
          console.log("loadOrder end")
          console.log("focus: " + this.data.focus)
        })
    }
  }
bindfocus() {
    if (this.data.blurFlag) {
      this.setData({
        focus: false
      })
      console.log("bindfocus blurFlag: " + this.data.blurFlag)
      console.log("focus: " + this.data.focus)
    } else {
      this.setData({
        focus: true
      })
      console.log("bindfocus blurFlag: " + this.data.blurFlag)
      console.log("focus: " + this.data.focus)
    }
  }
bindblur() {
    this.setData({
      focus: false
    })
    console.log("bindfblur blurFlag: " + this.data.blurFlag)
    console.log("focus: " + this.data.focus)
  }
< H2 > 4. Analyze the problem < / H2 > The

bindfocus and bindblur events and blurFlag variables are set only to troubleshoot detection problems.
according to the output of the console, it is found that after the end of business processing, the code setting focus=false triggers a bindblur, and another unknown factor triggers a bindfocus. What exactly triggered the bindfocus this time was not found.
what"s more, why does this problem occur when you enter the page for the first time? onload doesn"t do anything that involves out-of-focus, but initializes focus to true and blurFlag to false in data.
Wechat version is 6.6.7
ask the gods, online and so on.


Mini Program has a lot of tricks, and their quality control has always been a problem, so I usually don't go particularly in-depth to study where the problem is. If there is no result, I will find a way to get around it.

Why don't you use focus and try disabled in this place?


also encounters the same problem. After losing focus, input gains focus again for some inexplicable reason, causing the input method to pop up again;
tries to use disabled to disable input, so as to prevent the input method from popping up and finds it invalid

.

want to know how the landlord solved this

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b9b4b2-2e5d0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b9b4b2-2e5d0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?