react - 选择使页面向下滚动

Question

我在我的项目中使用了react-select，我有很多选择，我需要选择是打开的，所以我使用了menuIsOpen={true}这个道具。

我有很多选择，我需要选择是打开的，所以我使用了menuIsOpen={true}这个道具，但是由于某些原因，这个道具导致页面向下滚动，几乎到了页面的中间。

当我设置menuIsOpen={false}时，页面没有向下滚动，但这并不能解决这个问题，因为我必须打开选择。

有人熟悉这个问题吗？

      <Select
        styles={filter.name !== "More" ? basicStyles : moreStyles}
        isMulti={filter.name !== "colorType" ? true : false}
        options={options}
        hideSelectedOptions={false}
        closeMenuOnSelect={false}
        placeholder=""
        value={selectedValues ? selectedValues : []}
        isClearable={false}
        isSearchable={false}
        onChange={addSelectFilter}
        components={{ MultiValueLabel: customMultiValueLabel }}
        blurInputOnSelect={false}
        classNamePrefix={filter.name === "More" ? "more" : "basic-drop"}
        className={filter.name === "More" ? "more-select-container" : undefined}
        menuIsOpen={
          filter.name === "More" ? undefined : menuIsOpen ? true : undefined
        }
      />

Answer 1

我也有同样的问题，而且很烦人! 我通过设置一些自定义的样式和为门户添加道具来解决这个问题，比如。

    const customSelectProps = {
        menuPortalTarget: document.getElementById('root'),
        customStyles: {
            menuPortal: base => {
                const { zIndex, ...rest } = base;
                return { ...rest, zIndex: 9999 };
            },
        },
    };