Clear refinements and query on search-box focus

Working on a simple search & filtering PoC using the InstantSearch widgets – smooth sailing so far!

One request we got was to clear all refinements after a search box focus or click. I have tried extending the widget using the template slot as such, but it seems the ‘refine’ function here only has access to refines set inside the search box, not the overall query.

I have tried creating an method in my Vue script but can’t wrap my head around how to access the active query and clear it from that point just yet.

Anyone who can point me in the right direction for this one?

<ais-search-box>
    <template v-slot="{ currentRefinement, isSearchStalled, refine }">
        <input
        type="search"
        :value="currentRefinement"
        @input="refine($event.currentTarget.value)"
        @focus="refine('')"
        >
        <span :hidden="!isSearchStalled">Loading...</span>
    </template>
</ais-search-box>

Picked up working on this a few months later, but still unsure how to tackle. Any idea how to globally reset the query?

Could you use ais-clear-refinements for this? Either add the widget to your UI, or if you want it to be a side effect of search box focus, over rider the UI and call it directly?