NO BUG: Filter Search Interaction Focus/Blur applied to parent wrapper instead of the input

[Andris]

I tried to add an interaction (on Focus/Blur add CSS class to an element) to the input field of the Filter - Search element. I noticed it didn’t work and I suspect it because the interaction is applied to the wrapper element of the field and not directly on the input element. Here is the source code:

<div id="brxe-3b9db0" class="brxe-filter-search" data-interactions="[{&quot;id&quot;:&quot;wnlhca&quot;,&quot;trigger&quot;:&quot;focus&quot;,&quot;action&quot;:&quot;removeAttribute&quot;,&quot;actionAttributeKey&quot;:&quot;class&quot;,&quot;actionAttributeValue&quot;:&quot;open&quot;,&quot;target&quot;:&quot;custom&quot;,&quot;targetSelector&quot;:&quot;.categories-wrapper&quot;},{&quot;id&quot;:&quot;ezbbmr&quot;,&quot;trigger&quot;:&quot;blur&quot;,&quot;action&quot;:&quot;setAttribute&quot;,&quot;actionAttributeKey&quot;:&quot;class&quot;,&quot;actionAttributeValue&quot;:&quot;open&quot;,&quot;target&quot;:&quot;custom&quot;,&quot;targetSelector&quot;:&quot;.categories-wrapper&quot;}]" data-interaction-id="23f150"><input value="" data-brx-filter="true" name="form-field-3b9db0" placeholder="Keresés és szűrés" type="search" autocomplete="off" spellcheck="false" aria-label="Keresés és szűrés"><svg tabindex="0" role="button" aria-label="Törlés" xmlns="http://www.w3.org/2000/svg" class="icon lucide lucide-x" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></div>

Can I somehow apply the interaction to the inner input element?

[timmse]

Thanks for the report. Your diagnosis is correct: the Filter - Search element interaction is bound to the element wrapper, not directly to the inner input, so Focus/Blur interactions will not fire when the visitor focuses the search field.

There is no native setting to bind that interaction directly to the inner input right now. If your goal is styling, use CSS on the wrapper/input focus state instead, for example .brxe-filter-search input:focus-within { ... } or .brxe-filter-search input:focus { ... }.

If you need to add or remove a class through interaction logic, it requires custom JavaScript attached to the inner input.

Overall, it’s not a bug.

P.S.: It would be great if, in the future, you could copy the element (right-click » “Copy”) or the entire layout (click “Copy All” at the top of the Structure panel) instead of just the HTML—that way, you could copy and paste it directly

[Andris]

Okay, I will do that next time.

Do you plan to make some adjustments so the interactions can be targeted to inside elements? Because focusing on a non-focusable element doesn’t make sense. I understand this is not a bug but the users expect it to focus on the focusable element if they can select the focus/blur interaction trigger.

Thank you for explaining!