密码输入框切换为password类型时无法输入变音字符问题求助

问题现象 #

• 输入框为text类型时，Mac环境下可通过Option + n + a输入ã，或长按a键选择目标变音字符，功能完全正常。
• 切换为password类型时，Option + n操作被忽略，仅输入字母a；长按a键只会重复输入该字母，目前只能通过粘贴方式在隐藏状态下输入这类Unicode字符。
• 输入框显隐切换通过type={revealed ? "text" : "password"}实现，是较旧的标准实现方式。

相关代码片段 #

样式容器定义 #

const RevealContainer = styled.div`
  position: absolute;
  right: 12px;
  bottom: ${props =>
    (getInputHeight(props.size) - getLinkButtonHeight(revealLinkSize)) / 2}px;
  line-height: normal;
`;

Input组件默认属性 #

Input.defaultProps = {
  type: "text",
  autoFocus: false,
  disabled: false,
  invalid: false,
  autoComplete: "off",
  autoCorrect: "off",
  spellCheck: "false",
  large: false,
  maxLength: 255,
  focused: false,
  locked: false,
  size: SIZES.MEDIUM
};

密码输入框渲染逻辑 #

render() {
  const revealed = this.props.revealed || this.state.revealed;

  return (
    <PasswordInputContainer>
      <InputWithReveal
        {...this.props}
        type={revealed ? "text" : "password"}
      />
      {/* 插入此div验证代码区域操作正确 */}
      <div>Meow</div>
      <RevealContainer size={this.props.size}>
        <LinkButton onClick={this.toggleReveal} size={revealLinkSize}>
          {revealed ? (
            <FormattedMessage defaultMessage="Hide" />
          ) : (
            <FormattedMessage defaultMessage="Show" />
          )}
        </LinkButton>
      </RevealContainer>
    </PasswordInputContainer>
  );
}

排查过程 #

• 已验证多个外部网站的密码输入框可正常处理变音字符。
• 按同事建议尝试修改React Select的ignoreAccents和ignoreCase属性（设为false，包括字符串"false"和布尔值false），问题未解决。
• 通过在render方法中插入<div>Meow</div>并确认其显示，已确认操作的代码区域正确。

补充测试与疑问 #

• 了解到"dead keys"（死键）相关概念后，发现旧的Chromium相关bug报告，随后在多浏览器测试：Firefox中功能正常，Chrome和Safari均出现相同问题。
• 疑问：该问题是否属于浏览器兼容性问题？

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