< 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

< 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.