usePopoverState with PopoverButton

[mel510]

Sandbox: https://codesandbox.io/s/paste-starter-kit-forked-omop5?file=/src/index.tsx

I'm trying to combine the usePopoverState hook with the PopoverButton component, but cannot get the popover to show. The hook works with a separate Button component, but unfortunately it seems PopoverButton is required in order for the popover itself to be styled correctly.

Is this feasible and I'm not implementing it correctly? Or is this not a recommended pattern and we should change our design? Or is the pattern fine, but not currently supported by PopoverButton, and I would need to do something hacky to make it appear the way we want it to?

I'll post screenshots from our designer in help-design-systems for context.

Thanks!

[TheSisb]

Hi @mel510,

Thanks for reporting this. We're investigating and will get back to you soon.

[TheSisb]

Hi @mel510,

I finally figured out the issue. Our documentation is a little misleading because it uses an internal API we shouldn't be using. Instead, we should be managing visibility state on the PopoverContainer's visible prop. Here's an updated codesandbox with a solution:

https://codesandbox.io/s/paste-starter-kit-forked-7j7pg?file=/src/index.tsx

Hope this helps! We will update our docs soon.

[mel510]

Ah! I see. So we can just use the visible prop and don't need to directly refer to usePopoverState at all. Thank you!

[SiTaggart]

Hi @mel510

I actually have some follow up questions, because I think there might be a simpler solution.

If I'm understanding this correctly, you have a button that sometimes opens a popover, and sometimes opens side panel. I'm assuming the side panel is a totally custom thing unrelated to the Popover?

Because if that is the case, I can kind of understand why what you're trying to do isn't working. The PopoverButton is only designed to trigger the related popover and the hook methods are designed to be used to control the popover externally to the PopoverContainer. When you're trying to use the hook, on top of the PopoverButton, it's almost confusing itself. You are calling itself from itself, because that Button already calls the internals of showing or hiding the button.

If you're basically trying to do two different things from the same button, you might be better off forking the render logic entirely. So in one condition you render a Popover and PopoverButton. In the other condition you render an entirely different button, which does the other thing you need.

I created an example sandbox as an example https://codesandbox.io/s/making-a-button-do-2-different-things-e3oig

Basic premise is that PopoverButton, it just to control the popover, and that might help simplify things.

Let me know if I'm on to something

[mel510]

That approach was going to be my workaround, but does that pattern make more sense than trying to fork the logic inside the click handler?

[SiTaggart]

Yeah, it really does. The PopoverButton isn't just a Button. It's so tied to the popover component it doesn't make much sense to fork the logic and make it do something else.

If you were doing something in addition to showing the Popover, then would make more sense. But you wouldn't be messing with the visibility in the handler, just the additional functionality as the PopoverButton would be doing the visibility work for you.

[mel510]

Thank you!