Using multiple templates/slots on searchbox doesn't work

[eugenevk]

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

[Haroenv]

The default slot overrides everything, there's no slot to override only the input

[eugenevk]

Hi @Haroenv, I don't fully understand your comment. Can you elaborate?

[Haroenv]

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

[eugenevk]

Thanks for the explanation.