Automatically Clear the Filter Search Box in Vue

Background:

When you open a FlexGrid’s Excel-like filter dialog, the search field remembers what you typed last time. If you prefer it to start blank on every open, you can listen for the filter’s filterChanging event and clear the dialog’s search input right after the popup renders.

Steps to Complete:

1. Get a reference to the FlexGridFilter instance from the Vue wrapper via its initialized prop.
2. Handle the filterChanging event on that instance.
3. Use a short setTimeout so the popup exists in the DOM.
4. Select the search <input> inside the filter dialog, clear it, and dispatch an input event so the value list refreshes.

Getting Started:

<!-- GridWithAutoClearingFilter.vue -->
<template>
  <div style="height: 400px">
    <WjFlexGrid :itemsSource="rows">
      <!-- Capture the FlexGridFilter instance when it initializes -->
      <WjFlexGridFilter :initialized="onFilterInit" />
    </WjFlexGrid>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'

// Vue 3 wrappers
import { WjFlexGrid } from '@mescius/wijmo.vue3.grid'
import { WjFlexGridFilter } from '@mescius/wijmo.vue3.grid.filter'
import '@mescius/wijmo.styles/wijmo.css'

const rows = [
  { id: 1, country: 'US', sales: 123 },
  { id: 2, country: 'JP', sales: 456 },
  // ...
]

const filterRef = ref(null)
let handler = null

function onFilterInit(filter) {
  filterRef.value = filter
  // Define once so we can remove it on unmount
  handler = (s, e) => {
    // Optionally scope to a specific column:
    // const col = e.getColumn()
    // if (col.binding !== 'id') return

    // Wait for the popup to render, then clear the search box
    setTimeout(() => {
      const searchBox = document.querySelector(
        '.wj-dropdown-panel input.wj-form-control[type="text"]'
      )
      if (searchBox) {
        searchBox.value = ''
        searchBox.dispatchEvent(new Event('input', { bubbles: true }))
      }
    }, 50)
  }
  filter.filterChanging.addHandler(handler)
}

onBeforeUnmount(() => {
  if (filterRef.value && handler) {
    filterRef.value.filterChanging.removeHandler(handler)
  }
})
</script>

Hope you find this article helpful. Happy coding!