Simple reproduction code
-> check browser log
Error
When I'm using shadcn select component in a modal component from next ui. or any other container that uses portal. It throws:
RangeError: Maximum call stack size exceeded.
the select renders perfectly good, but when I open the options container, and hover over some options it will throw above error.
What I've tried
This problem is mainly happens because I'm using two portals together or nested. I have seen the issue in Shadcn popover and dialog when used together. Shadcn-popover-issue
The solution to this is to remove <SelectPrimitive.Portal> and its closing tag from select component. but when I do this some of the select options goes beneath modal container height. (something like overflow hidden) but it's not overflowing.
I've tried running select on another modal. (different library, radix ui). same results.
I've tried telling my modal to use specific container, and select another container for their portals. but It won't fix that.
I've tried wrapping memo around my modal and select component.
How can I fix that this?