Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)
Hi Bricks team,
I think I found a possible bug related to components, query loops, Filter Bar, and interactions.
I created a component to display WooCommerce products in a list. Inside this component, the products are rendered through a query loop. The query settings are connected through component properties, so the query can be controlled from the component instance on the page.
On the page where I use this component, I added a Filter Bar. For the Filter Bar’s target query, I selected the query from the component instance, for example:
ticket-row (instance)
However, the Filter Bar does not work.
I also tested moving the Filter Bar inside the component itself, but filtering still does not work correctly.
A similar issue happens with interactions. I have a toggle / show more interaction. This only works when the interaction trigger is placed inside the component. If the trigger is outside the component and targets content or elements inside the component instance, it does not work.
Expected behavior
The Filter Bar should be able to target and filter a query loop inside a component instance, especially when that query is exposed or controlled through component properties.
The Filter Bar should correctly detect the available filter values from the query results.
The search input should update/filter the target query results.
Interactions should also be able to target elements or query items inside a component instance, or this limitation should be clearly documented.
Actual behavior
The Filter Bar does not seem to recognize or communicate with the target query inside the component instance correctly.
With Hide empty enabled, all filter options are treated as empty, even though the component query displays products correctly.
The search field is ignored completely. Typing into the search input does not update, filter, or refresh the query results.
The toggle / show more interaction also does not work when the trigger is outside the component and the target is inside the component. It only works when the interaction is placed inside the same component.
Steps to reproduce
-
Create a Bricks component.
-
Inside the component, add a query loop that displays WooCommerce products.
-
Connect the query settings through component properties.
-
Add the component to a page.
-
Add a Filter Bar on the page.
-
Set the Filter Bar target query to the query loop inside the component instance, for example
ticket-row (instance). -
Enable Hide empty on the Filter Bar filters.
-
Check the frontend.
Result:
The component query displays products correctly, but the Filter Bar treats all filter options as empty.
-
Add a search filter to the Filter Bar.
-
Type something into the search field.
Result:
The search input is ignored completely and the results do not change.
-
Add a toggle / show more interaction outside the component.
-
Set the target to content or elements inside the component instance.
Result:
The interaction does not work unless the trigger is placed inside the same component.
Additional notes
It looks like component instances may be isolating the query and DOM targets in a way that prevents the Filter Bar and external interactions from accessing them correctly.
The issue is not only that the frontend results do not refresh. With Hide empty enabled, the Filter Bar appears to read the target query as empty, even though the query inside the component is displaying products.
Could you confirm whether this is expected behavior/limitation of components, or should Filter Bar and interactions be able to target queries and elements inside component instances?