clears-query Feature in currentRefinements

[Cristian Fonseca]

Feature ⚡️

What is your use case for such a feature?

Hello , I have the following code for a custom SearchBox to debounce it as recommended here

This is the code :

<template>
  <v-text-field
    v-model="query"
    attributeName="query"
    class="ev-width-auto mx-2 my-2"
    height="10px"
    background-color="#FFFFFF"
    type="search"
    outlined
    dense
  >
    <template #append>
      <v-fade-transition leave-absolute>
        <v-icon>$vuetify.icons.magnify</v-icon>
      </v-fade-transition>
    </template>
  </v-text-field>
</template>
<script>
import { createWidgetMixin } from 'vue-instantsearch'
import { connectSearchBox } from 'instantsearch.js/es/connectors'

export default {
  name: 'NameSearchBoxExample',

  mixins: [createWidgetMixin({ connector: connectSearchBox })],
  props: {
    delay: {
      type: Number,
      default: 500,
      required: false,
    },
  },
  data() {
    return {
      timerId: null,
      localQuery: '',
    }
  },
  computed: {
    query: {
      get() {
        return this.localQuery
      },
      set(val) {
        this.localQuery = val
        if (this.timerId) {
          clearTimeout(this.timerId)
        }
        this.timerId = setTimeout(() => {
          this.state.refine(this.localQuery)
        }, this.delay)
      },
    },
  },
  destroyed() {
    if (this.timerId) {
      clearTimeout(this.timerId)
    }
  },
}
</script>

I have implemented the attributeName to pass it in the case of the component where I have the currentRefinement like this

<ais-current-refinements
        :included-attributes="[
          'query',
        ]"
      >
...
</ais-current-refinements>

This works perfect only that when the refine method is executed the input is not cleared, I assumed it was because it was a custom input and not with the searchBox component as it comes by default, I have implemented it that way and it did not work either, then I saw that the vue documentation for this widget does not mention anything about the clearsQuery method as it does for React and Javascript.

What is your proposal

<ais-current-refinements
        :included-attributes="[
          'query',
        ]"
       :clears-query="true"
      >
...
</ais-current-refinements>

What is the version you are using?

v4.4.2

[Dhaya]

Hi @kuzeofficial , the input is not cleared because the getter used in the custom search box does not take into account the updated query in the state. For that to happen, you can simply update your query getter method to:

get() {
  return this.state?.query || '';
},

[Cristian Fonseca]

Hi @dhayab thanks so much, get value from state work for me