Dropdown Hiding inside the table

[Fir-3]

I have a react-select component in my table it works fine when there are lots of data but when I search for a row/value inside the table or If I have 2 or 3 rows in my table, my dropdown hides inside the table attaching the screenshot below
so can you help me with this, please?

code sandbox --> https://codesandbox.io/s/tender-sound-95sgv?file=/src/App.js

• react: ^16.14.0
• react-data-table-component: ^7.0.0-rc6
• react-select: ^4.3.1

[Rall3n]

Hello @Fir-3,

this is not directly a problem with react-select but with react-data-table-component setting overflow: hidden on its outermost container.

You can easily resolve this issue using the menuPortalTarget prop to render the opened dropdown outside of the table component (but still correctly aligned).

<Select menuPortalTarget={document.body} />

Please respond if this has solved your problem.

[Fir-3]

Hello @Fir-3,

this is not directly a problem with react-select but with react-data-table-component setting overflow: hidden on its outermost container.

You can easily resolve this issue using the menuPortalTarget prop to render the opened dropdown outside of the table component (but still correctly aligned).

<Select menuPortalTarget={document.body} />

Hi @Rall3n,

Thank you for the solution, it works well. I posted this in the react-data-table-component team as well.
It's really helpful and appreciate your quick response.

Please close the issue as well since it is now resolved

[robxbob]

```js
<Select menuPortalTarget={document.body} />

Is there a way to resolve this without affecting accessibility? (if it does affect it)

[Pragati-Kashyap]

I've been stuck on this problem for so long. Thanks, @Rall3n, it worked perfectly!