I have a react modal and inside it I have react-select. How can I make select overlay the modal because some of my options in the botttom of modal did not appear ?

I tried z-index but it did not work.

<MainSelect
        className="select"
        id={name}
        isMulti
        isRtl={!locale.ltr}
        ponents={{ Option: OptionComponent }}
        styles={this.customStyles}
        theme={this.customTheme}
        options={options}
        value={value}
        placeholder={placeholder}
        onChange={this.handleChange}
        onBlur={formik.onBlur}
        onMenuOpen={() => {
          if (setScroll) setScroll();
          this.props.formik.setStatus("onMenuOpen");
        }}
      />

I have a react modal and inside it I have react-select. How can I make select overlay the modal because some of my options in the botttom of modal did not appear ?

I tried z-index but it did not work.

<MainSelect
        className="select"
        id={name}
        isMulti
        isRtl={!locale.ltr}
        ponents={{ Option: OptionComponent }}
        styles={this.customStyles}
        theme={this.customTheme}
        options={options}
        value={value}
        placeholder={placeholder}
        onChange={this.handleChange}
        onBlur={formik.onBlur}
        onMenuOpen={() => {
          if (setScroll) setScroll();
          this.props.formik.setStatus("onMenuOpen");
        }}
      />

• javascript
• css
• reactjs

3 Answers 3

As stated in this StackOverflow answer here, the menuPortalTarget allows you to select the dom node over which the menu is overlayed.

<Select
 menuPortalTarget={document.body}
 styles={{
     menuPortal: base => ({ ...base, zIndex: 9999 })
 }}
/>

The issue here is the default style of React Modal i.e overflow:hidden. And React-modal allows you to easily override default styles. Just add overflow: visible to the modal's CSS.

First, you need to set a className property on the Bootstrap modal, so you can easily select it in the DOM. Then in the react-select ponent, use the menuPortalTarget prop to specify that the dropdown menu should be attached to the modal. Use something similar to this:

<Select
  ...
  menuPortalTarget={document.querySelector('.my-modal')}
  styles={{
    menuPortal: base => ({ ...base, zIndex: 9999 }),
  }}
/>