menuPortalTarget doesn't not work if react-select dropdown opens inside modal

Question

I have a problem react-select dropdown opens inside modal

Below is my coding:

<Select                
styles={{
  menu: provided => ({ ...provided, zIndex: 9999 })
}}
options={optionsHour}
value={{ label: durationHour, value: durationHour }}
onChange={(e) => { setDurationHour(e.value) }}
>
</Select>

This one is the current result, it cannot show react_select dropdown over modal.

I tried the below code with using menuPortalTarget, but it also cannot work.

<Select                
styles={{
  menu: provided => ({ ...provided, zIndex: 9999 })
}}
menuPortalTarget={document.body}
options={optionsHour}
value={{ label: durationHour, value: durationHour }}
onChange={(e) => { setDurationHour(e.value) }}
>
</Select>

Below result is what I've tried:

Actually, I want the result like below the picture:

Hope someone can guide me on how to solve it. Thanks.

Answer 1

Give your modal a class (for example, dialog-base) and then reference it in menuPortalTarget:

  menuPortalTarget={document.getElementsByClassName('dialog-base')[0] as HTMLElement}

Then add the following prop as well:

  menuPosition="fixed"