NO BUG: Live Search results wrapper gets hidden when input is not focused

Bugs
1

Link: https://appsolute.hu/szerviz/iphone-szerviz/

I’ve set up a live swearch to search in the price list. I set the live search in the query editor and the live search works well. I also set the search results wrapper properly (I hope so). When I type something into the search field results appear.

However when I click outside the search input, the results disappear which is not the desired behavior. The results should remain in their place and only disappear when I delete the input field.

I noticed when the input is focused I have a .brx-ls-active class on the results wrapper and when it is not focused the class is removed and that is why it gets hidden.

Is there a way to make it work “normally” or what am I missing?

Thank you @timmse for looking into this.

2

My bad. I figured that if I don’t turn on the live search function on the query editor the live search filter works well without it. It was confusing in the UI but now I know.

3

What I really want to achieve is that there should be no results at first (limit: zero). But when I search the results should appear. And after clicking elsewhere should not close the results wrapper. Is it possible to start with an empty results list by default?

4

Hi Andris,
Could you please stop tagging me in every one of your posts? There’s really no reason to do that… Thanks! :smiley:

Please have a look at the Academy and the video linked there:

5

Hey Stefan,

Noted! (Sorry for tagging you but I figured when I tagged you you always pointed me in the right direction and when I haven’t tagged any dev the question lost in time without answer. In the future I will only tag a dev if no answer is received for a longer time :slight_smile: )

Regarding the issue: I did everything that is written in the academy but still no good:

Use case 1: I don’t set the query to live search, it appears on page load but I can use the search filter to filter it making it somehow live search-like. This solution is not good because at page load I don’t want to show any results because it is confusing for the user that wants to search in the price list (why show him some random price list items initially?)

Use case 2: If I set the query to live search it works as expected: shows nothing on page load and shows results on search filter input. HOWEVER when I click outside the input (not focus anymore) the results container just disappears which is also very confusing and seems buggy.

What I want to achieve: load the page without results and if I enter text in the search filter it should show results. The results should remain on the page even if I click/scroll/browse elsewhere on the same page.

Do you understand my issue? I set up a demo page for you to test the issue: https://appsolute.hu/szerviz/iphone-szerviz-arlista-masolas

Thank you for your help again!

6

If I or one of us sees a question we can answer specifically, we usually do so. Of course, there may be times when we overlook a thread… so it’s totally fine to tag us after a while :v:

Use case 2 is basically what you want, and the behavior is the expected result as this is how it currently works. You can use a custom JS/CSS snippet to alter it (ChatGPT or Claude is super helpful :robot:).

Add a code element at the end of your search section (below the search/search results wrapper) and add the following:

CSS:

@layer bricks {
	[data-brx-ls-wrapper].keep-live-search-open:not(.brx-ls-active) {
		display: flex !important;
	}
}

JS:

document.addEventListener('bricks/ajax/query_result/displayed', (event) => {
	const queryId = event.detail?.queryId

	if (!queryId) {
		return
	}

	const query = window.bricksData?.queryLoopInstances?.[queryId]

	if (!query?.isLiveSearch) {
		return
	}

	const wrapper = document.querySelector(`[data-brx-ls-wrapper="${queryId}"]`)
	const searchInput = Object.values(window.bricksData?.filterInstances || {}).find((filter) => {
		return filter.targetQueryId === queryId && filter.filterType === 'search'
	})?.filterElement

	if (wrapper && searchInput?.value.trim()) {
		wrapper.classList.add('keep-live-search-open')
	}

	if (wrapper && !searchInput?.value.trim()) {
		wrapper.classList.remove('keep-live-search-open')
	}
})

Enable render without wrapper and execute code, and it should keep the results open (at least it does in my test).

1 Like
7

Thank you! I also thought that if there is no Bricks solution I would use Gemini or Claude to write a function for this. This works perfectly so I leave it as is. If I fine tune it in the future, I will post it here. Cheers!