React自定义输入框Web/iPhone端正常但Android端异常问题求助

问题表现 #

• 自定义输入框组件在桌面Web端、iPhone设备上交互、输入功能均正常
• 组件在Android设备上无法正常唤起软键盘、输入内容无响应

问题复现代码 #

<div
  ref={ref}
  className={classes.part}
  onKeyDown={disabled ? undefined : handleKeyDown}
  onClick={disabled ? undefined : handleClick}
  tabIndex={disabled ? undefined : 0}
>
  <input
    type='text'
    value={isUndefined(value) ? '--' : pad(value, 2)}
    disabled={disabled}
    className={classnames(classes.partInput, isCalendar ? classes.partCalendar : classes.partTime)}
  />
</div>

问题根因 #

Android系统WebView对可编辑元素的焦点判定、事件冒泡逻辑和iOS、桌面端浏览器存在实现差异：

1. 所有交互事件全绑定在外层div容器，真实的input输入元素未绑定任何交互逻辑，Android端不会把外层容器的点击事件透传判定为输入框唤起请求
2. 输入框无值时强行给value属性赋值--字符串，会被Android端输入校验逻辑判定为非用户可控的只读值，直接阻断输入流程
3. 外层div设置了tabIndex={0}会抢占输入框焦点，导致点击后焦点落在div容器上，无法触发软键盘唤起

修复方案 #

• 将点击、键盘交互事件直接绑定到input元素上，不要依赖外层容器的事件冒泡触发输入逻辑
• 移除value属性上硬编码的--占位值，改用原生placeholder属性实现无值状态的占位提示，value属性仅绑定真实的用户输入值
• 删除外层div上冗余的tabIndex配置，焦点直接交由内部input元素接管，禁用态判断直接作用在input元素上即可，不需要在外层额外做事件拦截

修复后可正常兼容全端的参考代码：

<div
  ref={ref}
  className={classes.part}
>
  <input
    type='text'
    value={isUndefined(value) ? '' : pad(value, 2)}
    placeholder="--"
    disabled={disabled}
    onKeyDown={disabled ? undefined : handleKeyDown}
    onClick={disabled ? undefined : handleClick}
    className={classnames(classes.partInput, isCalendar ? classes.partCalendar : classes.partTime)}
  />
</div>

内容的提问来源于stack exchange，提问作者Efrat