AsyncSelect的menuPortalTarget功能异常 异步加载后下拉菜单偏移至屏幕底部

问题根因 #

你的异常表现完全符合react-select使用menuPortal时的已知定位bug：当你将menuPortalTarget绑定到document.body时，异步加载选项触发菜单重新渲染的时机，早于组件计算输入框相对视口坐标的时机，此时菜单会默认落到视口底部，直到鼠标悬停等操作触发页面重排，组件才会重新计算坐标将菜单归位。

解决方案 #

方案1：强制固定定位策略（最简便，改一行代码） #

给AsyncSelect组件新增menuPosition="fixed"属性，强制组件使用fixed定位逻辑计算菜单位置，避免异步更新时的时序差导致的定位错误，修改后的组件代码如下：

<AsyncSelect
  classes={classes}
  key={this.props.index}
  inputId={"react-select-input-" + uniqueInput}
  defaultOptions={
    this.props.defaultOptions ? this.props.defaultOptions : []
  }
  isClearable
  placeholder={this.props.placeholder}
  loadOptions={(value, callback) => {
    if (this.props.index >= 0) {
      this.props.handleInputChange(
        value,
        this.props.index,
        callback
      );
    } else {
      this.props.handleInputChange(value, callback);
    }
  }}
  components={this.components}
  value={this.state.selectedOption}
  onChange={this.handleChangeSingle}
  styles={
    this.props.isInPopup
      ? { menuPortal: (base) => ({ ...base, zIndex: 9999 }) }
      : {}
  }
  menuPortalTarget={this.props.isInPopup ? document.body : false}
  {/* 新增这一行即可 */}
  menuPosition="fixed"
/>

方案2：移除portal配置（适合弹窗z-index足够的场景） #

如果你的弹窗容器本身的z-index层级足够高，不需要将菜单挂载到body下避开层级遮挡，可以直接去掉menuPortalTarget配置，将z-index设置到菜单本身即可：

<AsyncSelect
  // 其他原有属性保留
  styles={{
    menu: (base) => ({ ...base, zIndex: 9999 })
  }}
  // 去掉menuPortalTarget配置
/>

这种方式从根源上避免了跨DOM层级的定位计算，不会出现错位问题。

方案3：强制菜单重绘 #

如果前两个方案不适用，你可以在loadOptions的回调执行完成后，手动触发一次组件更新，让菜单重新计算位置，比如给组件加一个随加载状态变化的key，或者在异步回调结束后调用forceUpdate()。

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