react - select causing page to scroll down

Question

I am using react-select in my project.

I have a numerous selects and I need the selects to be open so I am using the prop menuIsOpen={true} but for some reason this prop causing the page to scroll down to almost the middle of the page.

when I am setting menuIsOpen={false} the page is not scrolled down but it does not solve the problem because I must have the selects open

is anyone familiar with this problem?

      <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

This problem is caused by the default value of the menuPosition prop being absolute. On a long dropdown list, the dropdown area overflows the screen and makes the browser scroll down.

Add menuPosition="fixed" as a prop to the Select component and it should work. Then you also do not need to set the z-index manually.

Answer 2

I had the same issue, and it was quite annoying ! I resolved it by setting some custom style and adding the props for the portal like:

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