Material UI Autocomplete内嵌DatePicker弹出失效咨询

直接调整实现逻辑，从结构上消除嵌套弹层的事件冲突：

• 实现思路重构
  放弃“Autocomplete弹出层内放置可独立触发展开的DatePicker”的嵌套交互，直接提取DatePicker的日历面板内容，渲染在Autocomplete的popper容器内，去掉DatePicker自身的独立弹层层级，从根源上规避两个弹层的状态、事件冲突。
• 核心配置调整
  • 将Autocomplete的展开状态设为完全受控，通过open属性手动控制弹层的显示/隐藏，不再依赖默认的聚焦、外部点击自动关闭逻辑，所有状态变更通过手动逻辑触发。
  • 给Autocomplete的popper容器增加onMouseDown事件拦截，添加e.preventDefault()逻辑，阻止用户点击popper内部元素时触发输入框失焦，避免Autocomplete在操作日期面板时意外关闭。
  • 为嵌入的DatePicker开启disablePortal配置，确保日历面板和Autocomplete的popper处于同一DOM层级，不会因为层级脱离导致事件检测异常；同时隐藏DatePicker自带的输入框UI，仅保留日历交互面板。
• 选中自动关闭逻辑实现
  不依赖全局点击监听、事件冒泡这类不稳定的实现方式，直接在DatePicker的onAccept回调中修改Autocomplete的受控open状态为false，同时将选中的日期值同步到Autocomplete的输入框展示值，一步完成选中回填、弹层关闭的全流程，不存在事件穿透、漏触发的问题。
• 核心代码示例

  const [autocompleteOpen, setAutocompleteOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState(null);
  
  <Autocomplete
    open={autocompleteOpen}
    onOpen={() => setAutocompleteOpen(true)}
    onClose={() => setAutocompleteOpen(false)}
    slotProps={{
      popper: {
        onMouseDown: (e) => e.preventDefault()
      }
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        value={selectedDate ? format(selectedDate, 'yyyy-MM-dd HH:mm') : ''}
        placeholder="选择日期时间"
      />
    )}
    ListboxComponent={(props) => (
      <div {...props} style={{ padding: 0 }}>
        <DateTimePicker
          disablePortal
          open={true}
          value={selectedDate}
          onChange={(newVal) => setSelectedDate(newVal)}
          onAccept={() => setAutocompleteOpen(false)}
          slots={{
            field: () => null
          }}
        />
      </div>
    )}
  />
  

• 常见避坑点
  • 浏览器原生日期选择器的弹层逻辑完全由浏览器管控，无法自定义层级、事件回调，兼容成本远高于组件库的受控实现，不建议作为长期方案使用。
  • 嵌入DatePicker时不要保留默认的Portal挂载行为，否则面板会脱离Autocomplete的popper DOM树，被Autocomplete判定为外部元素，触发自动关闭。

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