ios mobile phone number input box keyboard flashes

Emmmm, this is a small problem that I recently found out by UI in the process of developing a project with react.
Since ios11, the browser of Apple's mobile phone has the function of automatically filling in passwords, but this function has caused me some trouble.
Specifically, it is a mobile phone number and password login page. ios recognizes that the current page has a password input box, so it triggers the function of automatically filling the password.
The previous gif image here will be more intuitive to see.

We can clearly see that the top of the iOS phone number keyboard flickers quite dazzlingly when the user is typing (Android phones do not).
I developed it with react, so I decided at first that I wrote this input box as a controlled component, and then performed a lot of operations during the input box input process to cause this effect. Later, I directly opened a pure page with only the mobile phone number input box and the password input box, and the result was still the same.
A search on the Internet can find the following two solutions

// 设置`autocomplete`为`off`,适用于普通文本框
<input type="text" autoComplete="off"/>
// 设置`autocomplete`为`new-password`，适用于密码输入框
<input type="password" autoComplete="new-password"/>
复制代码

But in fact, the above two methods have no effect on the commonly used browsers, although other blogs say that the reason is this
, so I simply removed the "password" part at the top of the mobile phone number keyboard, then the question is, how? Remove this thing? In fact, the browser has a behavior, that is, when the mobile phone number input box and the password input box are adjacent to each other, when entering the mobile phone number, there will be the effect of automatically filling in the password. Now that we have found the rule, we can use a Hidden input blocks this connection

<div className={styles.box}>
  <div className={styles.item}>
    <div className={styles.label}>手机号</div>
    <input type="tel" className={styles.value} placeholder="请输入手机号" />
  </div>
  {/* 该隐藏的input用于阻断 */}
  <input
    type="text"
    style={{
      opacity: 0,
      width: 0,
      height: 0,
    }}
  />
  <div className={styles.item}>
    <div className={styles.label}>密码</div>
    <input
      type="password"
      className={styles.value}
      placeholder="请输入密码"
      autoComplete="new-pwd"
    />
  </div>
  <button type="submit" className={styles.btn}>
    提交
  </button>
</div>
复制代码

The final effect: