React select can not overlay react modal

Question

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}
        components={{ 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");
        }}
      />

score 4 · Answer 1 · edited May 31 '23 at 20:24

4

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 })
 }}
/>

edited May 31 '23 at 20:24

Joshua Wolff

2,687
1
25
42

answered May 23 '22 at 11:39

user19180144

41
1

1

You should add some more information explaining why the code that you posted could help the original poster – Joon May 23 '22 at 12:05

score 3 · Answer 2 · answered Jul 18 '19 at 07:39

3

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.

answered Jul 18 '19 at 07:39

Abdul Mannan

170
1
8

but ihave already scroll on the modal but the select at the modal bottom go inside and last option did not appear – Yussur Alani Jul 18 '19 at 08:01
for me the solution was overflow:visible on .modal-body – Rogelio Triviño Jan 09 '22 at 09:25

score 0 · Answer 3 · answered Jul 11 '23 at 18:15

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 component, 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 }),
  }}
/>

React select can not overlay react modal

3 Answers3

Linked