移动端date类型输入框接收点击但不触发日期选择器问题排查

我需要实现点击样式化容器时，触发宽高为0的隐藏date类型输入框的点击事件，核心代码如下：

<Container flexDirection="column" onClick={handleClick}>
     <StyledInput
          type="date"
          name="date"
          ref={inputField}
          onChange={handleDateChange}
          value={moment(values[name]).format('YYYY-MM-DD')}
          data-test={props['data-test']}
        />
</Container>

对应的handleClick函数：

const handleClick = e => {
    e.stopPropagation();
    inputField.current.click();
  };

日志显示输入框已接收点击事件，但日期选择器未弹出。仅直接点击输入框时才触发选择器，且仅输入框可见区域部分可点击。请问为何输入框接收点击却不触发日期选择器？

原因分析与解决方案 #

核心原因 #

1. 浏览器安全限制：主流浏览器对date输入框的日期选择器触发做了限制，只有真实的用户直接交互（比如鼠标点击输入框可见区域、键盘操作）才能唤起选择器，通过JS代码模拟的click()属于合成事件，会被浏览器拦截，防止恶意脚本滥用。
2. 隐藏元素的交互状态：如果StyledInput通过width:0、height:0、display:none等方式完全隐藏，浏览器会判定该元素处于非交互状态，即使触发了click事件，也不会触发选择器逻辑。

可行解决办法 #

1. 让输入框保持「视觉隐藏但可交互」状态

修改StyledInput的样式，用视觉隐藏的方式替代完全隐藏，既不影响布局，又能保留元素的交互能力：

StyledInput {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. 用focus()替代click()模拟触发

部分浏览器对焦点事件的限制更宽松，修改handleClick函数：

const handleClick = e => {
  e.stopPropagation();
  inputField.current.focus();
};

当date输入框获得焦点时，多数现代浏览器会自动唤起日期选择器。

3. 检查事件传播逻辑

尝试移除e.stopPropagation()，避免阻止事件传递影响输入框的交互触发：

const handleClick = () => {
  inputField.current.click();
};

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