MultiSelect Dropdown (react-select) options appears below the table

[nitishnivedan]

Hi,

I am using Multi select dropdown (importing Select from "react-select") in one of the columns of react table and the dropdown appears below the table. issue with the css part.

I am attaching the screenshot.

instead of dropdown options going over the table, it goes down the table and as a result vertical scroll appears. have tried z-index and stuff but no luck as of now. Kindly help. thanks in advance.

[datner]

This is unrelated to react-table, it's just how html works.
please refer to react-select and search their documentation how to use portals

[nitishnivedan]

@datner - yeah, I have checked portals, still no luck. may be portal works well with react-select when used in react table version 6, not the version 7. Anyways thanks for your suggestion.

If any one else has faced this issue while using react-select (multiple dropdown) in react-table, then please do suggest. Any lead is appreciated. Thanks

[datner]

react-table 7 is headless and does not render Dom at all, I can't even think where to begin

[nitishnivedan]

Agreed. but portal isnt the solution in this case.

[datner]

Why not? Protals exist for that exact reason, z-index can't help you here

[nitishnivedan]

@datner - applied portals and the dropdown menu is appearing completely outside the table. Please see my screenshot.

Some piece of code I am attaching here:-

(MultiSelectDropdown Component)

<Select

  value={selectedOptions}
  onChange={onChangeHandler}
  options={options}
  isMulti={true}
  styles={customStyles}
  menuPortalTarget={document.body}
/>

---

The below code is for one particular column to render the above multi select dropdown in each column
{
Header: () => (

WBSE
<span
class="required"
style={{ color: "#ff0000" }}
>
*

),
accessor: "WBSE",
disableFilters: true,
canGroupBy:false,
Cell: ({row}) => {
return ;
},
},

[datner]

I have to say I no idea why you would think this is related to react-table, and I don't really understand anything from the pictures. So to lay this issue to rest, here is a codesandbox example of how you can make react-select exist above the table

note that First Name is without a portal, the Last Name is with a portal. Everything is working as expected

[nitishnivedan]

@datner - i really dont understand why u keep saying its not related to react-table if u can fix it. anyways not convinced by the cosmetic look of the table u have given in first place.

To end this issue, i have shared the link below in codesandbox. Have added u in code sandbox and modify it if u r abe to fix it.Appreciate ur time.

https://codesandbox.io/s/hopeful-thompson-trs9f

[datner]

there you go, fixed. My change is @ Columns.js:29

[nitishnivedan]

@datner Not so easy bro. I have added some more columns. try to scroll while the dropdown is open, u will find the issue. But appreciate your effort.

[datner]

again, completely unrelated to react-table. Please follow this issue if you want more help

[nitishnivedan]

@datner - haan related/unrelated, separate thing. But its not fixable with your portal thing. right? :D .

[nitishnivedan]

@datner - one request. sorry if i am being rude but you should refer the documentations after you go through it once. the above link which u just shared,has the limitiation of scrolling not happening within once you apply the workaround, menuShouldBlockScroll={true}.

[ProtestSoftware]

This is unrelated to react-table, it's just how html works.
please refer to react-select and search their documentation how to use portals

Thanks mate, this helped a lot, portals work perfectly!

[nitishnivedan]

@datner - bro is there any solution for this #3152

please let me know if u need any more information

[github-actions]

This issue is being marked as stale (no activity in the last 14 days)

[github-actions]

This issue has been detected as stale and automatically closed. It's very likely that your issue has remained here this long because it would require breaking changes to v7. React Table v8 is currently in alpha (soon beta!) and already contains bug fixes, performance improvements and architectural changes that likely address this issue.

• If your v7 issue has been previously labeled as requiring breaking changes, please try the new v8 alpha/beta releases
• If your v7 issue has not already been labeled as a breaking change, open a new issue.
• If this was a v8 issue and was closed by mistake, please reopen or leave a comment below.