Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QUESTION] zIndex when using menuPortalTarget #55

Open
thvozdovic opened this issue Feb 19, 2022 · 4 comments · Fixed by #58
Open

[QUESTION] zIndex when using menuPortalTarget #55

thvozdovic opened this issue Feb 19, 2022 · 4 comments · Fixed by #58
Assignees
Labels
Help Wanted Extra attention is needed Question Further information is requested

Comments

@thvozdovic
Copy link

thvozdovic commented Feb 19, 2022

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?

@thvozdovic thvozdovic added the Question Further information is requested label Feb 19, 2022
@csandman
Copy link
Owner

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 csandman linked a pull request Feb 24, 2022 that will close this issue
@csandman
Copy link
Owner

csandman commented Feb 24, 2022

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!

@csandman csandman added the Help Wanted Extra attention is needed label Feb 24, 2022
@jiwanovski87
Copy link

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
Copy link
Owner

csandman commented Aug 9, 2024

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Help Wanted Extra attention is needed Question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants