search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Not able to use/combine <Tooltip> with <Popover> #246

Closed vladoyoung closed 2 months ago

vladoyoung commented 2 months ago

Describe the bug Mixing attributes passed from the two components doesn't work well at the moment. This possibly effects other components, but I've experienced it in this case only for now.

To Reproduce https://codesandbox.io/p/sandbox/icy-butterfly-qp6nnd I've put explanations for each approach in there.

Expected behavior <Tooltip> and <Popover> to work together seamlessly. The first example in the sandbox should work by default

Screenshots The sandbox should be enough

Environment (please complete the following information):

Additional context The third approach in the sandbox is the only way to make this work, but it's not a very clean approach.

blvdmitry commented 2 months ago

Thanks for highlighting this. I'll take a look into how to merge the event handlers there. It might be the case that flyout returns undefined for some of the handlers if they're not used right now (e.g. popover with click handler returns undefined for onMouseEnter which overrides Tooltip events)

blvdmitry commented 2 months ago

Should be fixed in 2.11.7.

This was happening since both components are using an internal utility which creates a ref and includes it in the attributes argument. So one ref was overriding another. To fix it, I'm now also checking for the parent context of the same utility and if it's available – I'm reusing the same ref.

https://github.com/formaat-design/reshaped/assets/887379/f8786b61-6a0e-4ab2-9fb0-8cebcf62e8e6