[QUESTION] zIndex when using menuPortalTarget

[thvozdovic]

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]

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.

[csandman]

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!

[jiwanovski87]

Hi @csandman,
I am quite new to frontend development and currently I am working with chakra and I also working with the chakra-react-select. Now I am facing the issue, when I use a popover from chakra and add the select to the popoverbody I can see the input but I cannot see the menu with the values to select.

Possibly this can be the problem with the zindex. Can you show any example how I can manipulate this?

[csandman]

Have you tried doing exactly what the original poster of this issue did? That should solve your issue:

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

The menuPortalTarget prop is what enables react-select's built-in portaling behavior, which should allow it to appear outside of the popover content (which is what I assume the problem is, it's not extending past the borders of it).