MUI Select组件iOS端输入搜索时弹出层偏移问题求助

各位大佬好！我在基于React（Vite）的项目里用Material UI的Select组件做了个带搜索过滤的下拉选择器——在Select的下拉弹窗里嵌入了TextField作为搜索栏，用来实时筛选选项列表。

但现在碰到个特别头疼的问题：只有在iOS设备上，一在搜索框里输入内容，整个下拉弹窗就会突然从Select组件的位置往上跳，完全脱离了原本应该贴合的Select字段，体验特别糟糕。

我已经做了一些尝试来避免事件冲突：比如给搜索框加了onClick和onKeyDown的事件阻止冒泡（除了Esc键，用来正常关闭弹窗），也设置了MenuListProps的autoFocusItem为false，但这个iOS独有的偏移问题还是没解决。

下面是我的组件核心代码，麻烦各位帮忙看看哪里可能出问题了：

<CustomSelect
  value={selecetedId}
  onChange={() => {}}
  displayEmpty
  renderValue={<Typography type="textMedium-14"> Select a item </Typography>}
  MenuProps={{
    MenuListProps: {
      autoFocusItem: false,
    },
  }}
  IconComponent={(props) => (
    <Box {...props} sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', mr: '6px' }}>
      <CaretDownIcon />
    </Box>
  )}
>
  <TextField
    placeholder={'Search'}
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    onClick={(e) => e.stopPropagation()}
    onKeyDown={(e) => {
      if (e.key !== 'Escape') {
        e.stopPropagation();
      }
    }}
    slotProps={{
      input: {
        startAdornment: (
          <InputAdornment position="start">
            <MagnifyingGlassIcon />
          </InputAdornment>
        ),
      },
    }}
  />
  {(() => {
    const menuItems: JSX.Element[] = [];
    filteredItems.forEach((item, index) => {
      menuItems.push(
        <MenuItem autoFocus={} key={item.id} value={item.id}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
            <SelectItemText text={item.name} isScrolling={isScrolling} />
          </Box>
        </MenuItem>
      );
    });
    return menuItems;
  })()}
</CustomSelect>

有没有大佬遇到过类似的iOS端MUI Select弹窗偏移问题？或者知道怎么让下拉弹窗在iOS输入时保持和Select字段的贴合固定位置？万分感谢！

内容来源于stack exchange