Can't display group on click and keep button clickable

I built a custom search for the header to get instant-search exactly as I wanted it. It works by displaying a group on focus of the input and generally works really well. The only problem is it displays behind content unless that content is “Send to back”. But if I send that content to back, the content is no longer clickable (buttons, inputs, etc.)

I can’t figure out a way around this and I’ve tried many, many things! Would love some advice.

Image: Search group displays behind other groups by default.

Image: Search group displayed over the groups properly, if the other groups are sent to the back

Image: But if the other groups are sent to the back, the button “behind group” is no longer clickable.

The search group? Tried it. Doesn’t work. If I bring the group with the button in it to the front, the search group falls behind it. If I bring the search group to the front, nothing happens. Maybe because it is in the header.

Sounds like a Group Focus element might be better suited.

Thanks for your response. Getting closer! But still not quite there. Because input fields do not have an “is focused” property, I’ve had to hack one together using a hidden button. Basically the logic is, “the button is visible when the input field is focused.” then a workflow of “while the button is visible → show the group focus group”. That way the group would show when the input field was focused. This worked when I was using a group instead of group focus (of course it wasn’t perfect because of the initial problem described). But now with group focus, it is causing erratic behavior. Sometimes I have to hold-click to get the group focus to continue showing, other times I click the input field and the group focus flashes and disappears.

Looks good here but often disappears.

It’s closing because (as mentioned in the docs I referenced) it is designed to close when you click outside of it.

One approach would be to change your UI a bit and have all the interactivity - including the input element inside the Group Focus. A text or button element could trigger the display of the Group Focus which could also have a negative top offset equal to the height of the trigger element so that it covers it when displayed.

Instead of a total redesign I made a small modification to make the hidden button visible when the input value has changed, not is focused. This works for my purposes. Going to mark group focus as solution since that was really the important piece to getting both the group to show in front and the buttons behind it to remain clickable. Thanks for your help.