PasscodeInput 短信验证码回填到输入框显示问题

[tangsongcq]

Version of antd-mobile

5.39.0

Operating system and its version

No response

Browser and its version

iPhone 13 16.3.1

Sandbox to reproduce

No response

What happened?

在项目中使用了 PasscodeInput 来输入用户返回的验证码 并且在onfill函数出发验证码验证操作
现在在ios部分机型上出现用户返回的验证码在原生键盘上面点击回填没有显示在输入框中 但是触发了onfiil函数 安卓目前没发现这个问题
有些机型是正常的 有些机型是有问题的（iPhone 13 16.3.1） 有些机型一开始有问题 但是重复实验几次之后 也可以显示在输入框中了（iphone15 18.6.2） 麻烦帮忙定位下

Relevant log output

[dosubot]

Hi @tangsongcq! I'm Dosu and I’m helping the ant-design-mobile team.

这是一个已知的 iOS 兼容性问题：在某些 iOS 设备上，短信验证码回填时，PasscodeInput 的 onFill 回调会被触发，但输入框内容不会同步显示。这是因为 iOS 的自动填充有时会直接写入原生 input 元素，但不会触发 React 的 onChange/onInput 事件，导致组件内部 state 没有及时同步，格子无法刷新显示【详见实现源码说明】(https://github.com/ant-design/ant-design-mobile/blob/d5e84226eec9100d8c2aac288485251816c372cf/src/components/passcode-input/passcode-input.tsx#L56-L192)。

临时解决方案：可以在 input 获得焦点或 onFill 后，主动读取原生 input 的 value，并用 setValue（带 forceTrigger 参数）强制同步到组件 state，从而刷新显示。例如：

const inputRef = useRef();

function handleFocus() {
  setTimeout(() => {
    const realValue = inputRef.current?.value;
    if (realValue) {
      setValue(realValue, true); // 第二个参数 true 表示强制触发更新
    }
  }, 100); // 延迟以确保 autofill 已完成
}

// 在 PasscodeInput 上绑定 ref 和 onFocus
<PasscodeInput
  ref={inputRef}
  onFocus={handleFocus}
  // 其他 props...
/>

这样可以确保 autofill 后格子能正确显示验证码。此问题目前仅在部分 iOS 设备和系统版本上出现，安卓和部分新 iOS 版本表现正常。更多细节可参考 usePropsValue 源码。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[tangsongcq]

@dosu 我们这边的问题现象 有点奇怪 同一个组件在某些场景下的ios机器上是OK的 但是在部分场景的ios机器上就有问题 而且还会出现 有些ios机器 一开始不能够自动回填 但是多试十几次 就会可以自动回填了 这个跟原生键盘的资源加载有关系么 还是说就是ios的兼容问题呢

[dosubot]

这个问题本质上是 iOS 的兼容性问题，不是原生键盘资源加载导致的。iOS 的短信验证码自动回填有时会直接写入原生 input，但不会触发 React 的 onChange/onInput 事件，导致 PasscodeInput 的内部 state 没有及时同步，格子无法刷新显示。多试几次后能回填成功，通常是因为某次自动回填的时机刚好和 React 事件监听对齐，才同步了状态并显示出来。

PasscodeInput 组件本身没有特殊处理 autofill 的逻辑，完全依赖 React 的受控输入模式，所以 iOS 系统层面的事件触发不稳定就会导致这种现象。类似的输入框兼容问题在 iOS 上也有其他表现，比如清除按钮、输入法组合事件等，都是系统层面的 bug 或限制（参考 相关讨论）。

建议用之前提到的方案：在 input 获得焦点或 onFill 后，主动读取原生 input 的 value，并用 setValue（带 forceTrigger 参数）强制同步到组件 state，这样可以最大程度规避 iOS 的 autofill 兼容问题。这个问题目前没有更彻底的解决办法，只能通过这种方式规避。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[tangsongcq]

@dosu 好的 感谢答复 所以多试几次后能回填成功 本质上还是凑巧 系统回填的时机和react的事件监听对齐了 系统还是具有不稳定性的 还有个问题哈 我看React 和 antd-mobile 的 setState / setValue 并不支持第二个参数 forceUpdate 您上面说的那个 setValue（带 forceTrigger 参数） 这个是从哪引用读取的呢

[dosubot]

你说得对，React 的 setState/useState 以及 antd-mobile 的大部分 setValue 并没有第二个 forceUpdate/forceTrigger 参数。之前提到的 setValue（带 forceTrigger 参数）其实是 antd-mobile 内部 usePropsValue hook 的实现细节（见源码说明），它不是 React 或 PasscodeInput 的公开 API，也不是你在业务代码里能直接用到的函数。

如果你需要在 autofill 后强制刷新 PasscodeInput 的显示，推荐的做法还是用受控模式：把 value 作为 props 传给 PasscodeInput，然后在 onChange/onFill 时用 setState 更新 value。这样可以确保每次外部 value 变化都能刷新组件显示。

如果你需要手动同步原生 input 的 value，可以这样写：

const [code, setCode] = useState('');
const inputRef = useRef();

function handleFocus() {
  setTimeout(() => {
    const realValue = inputRef.current?.nativeElement?.value || inputRef.current?.value;
    if (realValue && realValue !== code) {
      setCode(realValue); // 触发受控刷新
    }
  }, 100);
}

<PasscodeInput
  ref={inputRef}
  value={code}
  onChange={setCode}
  onFocus={handleFocus}
/>

这样就能规避 iOS autofill 不触发 onChange 的兼容性问题，无需用到 forceTrigger 参数。
如果有更底层的需求，可以参考 usePropsValue 的源码实现，但一般业务开发不需要直接用到 forceTrigger 这个参数。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[tangsongcq]

@dosu 好的 感谢你的解答 我这边修改下试试效果
还有就是 我们这边是监听了 onfill的事件
<PasscodeInput
ref={passcodeInputRef}
value={code}
onChange={setCode}
onFocus={handleFocus}
onFill={() => onFill()}
/>
为了自动请求rpc 在onfill里面做了
passcodeInputRef.current.blur(); 失焦处理

这块的逻辑是不是也是导致回填不成功的原因之一 而且我看你给的方案里面 有延迟触发受控刷新 那么失焦的处理是不是也要在这之后呢 你看下你这边的建议呢

function onFill() {

passcodeInputRef.current.blur();

// 弹窗提示会被键盘顶上去了，看起来很奇怪
// 所以键盘要先失焦 -> 验短请求异常弹窗提示 -> 点击按钮后，弹窗隐藏有动画，延迟聚焦
validateSms(passcode, () =>
  setTimeout(() => {
    passcodeInputRef.current.focus();
  }, 100),
);

}

[dosubot]

你的理解是对的，blur() 的调用时机确实会影响 iOS 下 PasscodeInput 的回填显示。建议不要在 onFill 里立刻调用 blur，而是等受控 value 已经同步并渲染后再失焦。否则有可能出现 autofill 的值还没来得及渲染，输入框就已经失焦，导致格子没显示出验证码（尤其是 iOS 下事件时序不稳定时）参考实现。

推荐做法是：在 onFill 里用 setTimeout 延迟 blur（比如 50~100ms），确保 value 已经更新并渲染后再失焦。例如：

function onFill(passcode) {
  setTimeout(() => {
    passcodeInputRef.current.blur();
    validateSms(passcode, () => {
      setTimeout(() => {
        passcodeInputRef.current.focus();
      }, 100);
    });
  }, 100); // 这里的延迟可以根据实际情况调整
}

这样可以最大程度避免 autofill 显示异常，提升 iOS 兼容性。核心原则就是：先让 value 受控刷新，等格子渲染出来，再 blur 隐藏键盘。如果你有手动同步 input value 的逻辑（比如 handleFocus 里 setCode），也建议先同步 value，再失焦。

如果还有 autofill 不显示的问题，可以适当加大 setTimeout 的延迟，确保渲染完成。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[tangsongcq]

@dosu 好的 感谢解答哈

[dosubot]

不客气！有问题随时 @我，祝你开发顺利！

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[zombieJ]

感觉需要提到文档的 FAQ 里。