I am building a Single Page Application (SPA) and using a Reusable Element for a custom dropdown (Status update).
My Setup:
I have a Focus Group inside a Reusable Element.
The RE is placed inside a Table’s Repeating Group cell.
I am using Option Sets to display statuses inside the Focus Group.
The Problem: When Focus Group is open and I click the Browser Back button, the Focus Group stays visible while the rest of the app navigates back. Since it’s an SPA, the page doesn’t reload, and the Focus Group remains stuck on the screen.
What I need: Is there a way to closes the Focus Group when browser back button is pressed.
Hi @Kartik This happens because the browser back button doesn’t trigger any Bubble workflow in an SPA, so the focus group never gets told to close.
The practical fix is to control the dropdown with a custom state instead of the focus group’s default behavior. Open it by setting a state to “yes” and hide it when the state is “no”. Then add a workflow on “Page is loaded” (or when the URL changes) to reset that state to “no”. When the user goes back, the state resets and the dropdown disappears.
Focus groups are fine for simple cases, but in SPAs they don’t play well with browser navigation unless you manage their visibility explicitly.
