25

I have a custom modal where I have 2 react-select components inside. The modal body is ready to auto scroll in case the content exceeds its size, but the react-select components dropdown open inside the modal with this overflow, which is what i am not looking for. Without overflow, it works fine.

I'm working with CSS Modules.

<div className={styles.modalBody}>
    {this.props.children}
</div>

.modalBody {
    padding: padding;
    flex: 1 1 auto;
    height: 45vh;
    max-height: 100%;
    overflow: auto;
}

<Select
    id={this.props.id}
    className={styles[this.props.selectType ? this.props.selectType : 'selectWhite']}
    classNamePrefix="select"
    name={this.props.name}
    value={selectedOption ? selectedOption : this.props.value}
    placeholder={this.props.placeholder}
    onChange={this.onChange}
    options={this.props.options}
    isDisabled={this.props.disabled}
    isSearchable={false}/>

How can I fix this? Thank you! :)

Improve this question
3
  • Can you explain what you do want to happen? Also, a code sandbox would be helpful here. Commented Feb 26, 2019 at 17:22
  • I would like the select menu to show above the modal Commented Feb 26, 2019 at 17:28
  • This StackOverFlow answer fixed my issue. Commented Oct 13, 2022 at 18:24

3 Answers 3

Reset to default
46

You want to look at the menuPortalTarget prop. There's a topic on this in the Advanced documentation, specifically with a modal example provided. Something like:

  <Select
    {...otherProps}
    menuPortalTarget={document.body} />
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Perfect solution. I also combined this with the menuShouldScrollIntoView prop as well.
This is a better answer stackoverflow.com/questions/57089251/…
This worked very well. Just added menuPortalTarget={document.body} styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
The response from @RohitParte should be in the accepted answer. The zIndex is crucial when there is a modal.
10

You can use Menu Position as fixed by setting the prop,which in turn makes your dropdown as position fixed as

<Select menuPosition="fixed" />
Improve this answer

1 Comment

simple elegant solution for this issue.
1

A full example of how to display the select menu in a modal (I added comments at important lines and a step-by-step explanation below):

import React, { useRef } from 'react';
import Select from 'react-select';
import { Dialog } from '@mui/material';

const MyModal: React.FC = () => {
    const ref = useRef<HTMLDivElement>(null);

    return (
        <Dialog
            // ...
            ref={ref} // stores a ref to the DOM node of the modal component
        >
            <Select
                // ...
                menuPortalTarget={ref.current} // pass the ref to `Select` to portal the select menu to the given DOM node
                styles={{
                    menuPortal: defaultStyles => ({  
                        ...defaultStyles,
                        paddingBottom: '10px', // style the menu when it's portalled into the DOM node given to `menuPortalTarget`
                    }),
                }}
            />
        </Dialog>
    );
};

export default MyModal;

Step-by-step explanation:

  1. I create a ref with the React.useRef hook.
  2. I'm getting a reference of the Dialog component (which in this example is a MUI dialog component (but could be any other Modal component) via ref={ref}
  3. I pass that ref to react-select's Select component via menuPortalTarget={ref.current}.
  4. I had to customize the placement of the menu via paddingBottom: '10px', because the menu would appear a bit too high in my case. You might have to adjust this differently.

Further comments:

  • document.body didn't do the trick for me. The menu appeared behind the modal for me in this case.
  • Unfortunately the react-select portaling docs do not contain any example code, so I hope this example is helpful to you.
Improve this answer

1 Comment

document.body didn't work for you because zIndex of your modal was higher than zIndex of menuPortal. It should be enough to set correct zIndex on menuPortal (same method like you set paddingBottom).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.