Using multiple templates/slots on searchbox doesn't work
eugenevk opened this issue Β· comments
Bug π
I have this code:
<div class="searchbox">
<ais-search-box placeholder="">
<template v-slot:submit-icon>π</template>
<template v-slot="{ currentRefinement, isSearchStalled, refine }">
<input
type="search"
:value="currentRefinement"
@input="refine($event.currentTarget.value)"
>
<span :hidden="!isSearchStalled">Loading...</span>
</template>
</ais-search-box>
</div>
This results in this searchbox:
which is not showing the submit icon, nor formats the searchbox as the default one:
See https://codesandbox.io/s/pedantic-rain-4fzfr?file=/src/App.vue
The default slot overrides everything, there's no slot to override only the input
The slot you're passing "default" overrides the complete DOM of the search box. As the icon is part of the complete DOM, also passing that slot will no longer have an effect, unless you render it manually inside your default slot. You can see this too if you pass either the item slot or the default slot for ais-hits
Thanks for the explanation.