csandman/chakra-react-select

[QUESTION] zIndex when using menuPortalTarget

thvozdovic opened this issue · 4 comments

thvozdovic commented

Hey,
is there a way to change the zIndex when using a portal to move the dropdown to document.body?
In react-select there's the styles property where you can customize CSS of the portal, like this:

<Select menuPortalTarget={document.body} styles={{menuPortal: (provided) => {...provided, zIndex: 100} }}/>

Unfortunately, the menuPortal property doesn't seem to exist in chakra-react-select in chakraStyles. Is there any way to change the zIndex on the portal?

csandman commented

Ah yes, I figured this would come up eventually. The MenuPortal component was the one component that I wasn't easily able to replace with a custom chakra component, so I left it alone, but since I stopped forwarding the styles prop along, it won't be affected by it. I'll make adding a custom component for the menu portal (along with a chakraStyles key for it) a priority.

In the meantime, as a workaround you do have the option to use the className styling with CSS to style it, using the className prefix__menu-portal.

I'll try and get a better solution to this out early next week.

  • ❤️2
csandman commented

So I spent a good while looking at the source code for the original MenuPortal component, trying to figure out how to replace it with a custom component which would allow me to use the styles from the chakraStyles prop, but I think it may be impossible. The original one returns a context provider which is not exported from the file so there is no way for me to import it in order to offer the same provider in a replacement component.

Because of that, the best I could do for now is re-enable the forwarding of the styles prop, specifically for this component. The prop won't affect any of the other components as they have all been replaced with custom components, but if you want to use the menuPortal style key, then you'll have to use it for that. This change can be seen in v3.0.5 and I also added some documentation about it.

While this solution is probably better than being forced to use CSS, I would like to find a better alternative at some point, so I am going to leave this issue open until I do. And if anyone else has any thoughts on the issue, definitely leave a comment!

  • 👍3