Replace the search icon with a reset icon button to reset search field

[yoricktran]

Hello,

I'm just trying to modify the search field for the Tree component in PrimeVue 4.0.7 to change the search icon to a button with a cross icon that resets the search field value to "". In Primevue 3.xx I just did this:

<Tree
  :value="nodes"
  :filter="true"
  filterPlaceholder="Search countries..."
  selectionMode="checkbox"
  :pt="{
      input: ({ state }: any) =>
        (state.filterValue = setFilter(state.filterValue)),
  }"
>
   <template #searchicon="slotProps">
        <Button
          v-if="filterTerm && filterTerm != ''"
          icon="pi pi-times p-icon p-tree-filter-icon"
          severity="secondary"
          text
          size="small"
          aria-label="Cancel"
          class="absolute right-0 h-full focus:!ring-0"
          @click="setFilter('', true)"
        />
   </template>
</Tree>

const filterTerm = ref<string>("");

// Enable the delete icon to reset the input field
let deleteFilterTerm = false;
const setFilter = (term: string | null, deleteTerm?: boolean) => {
  if (term != null && term != filterTerm.value)
    filterTerm.value = deleteFilterTerm ? "" : term;
  if (deleteFilterTerm && term == "") {
    deleteFilterTerm = false;
  } else {
    deleteFilterTerm = deleteTerm ? true : deleteFilterTerm;
  }
  return filterTerm.value;
};

I do get the icon replacement with the button to work (with a lot of CSS hacking), but the input passthrough doesn't work anymore. Also, I have no other way anymore to set the filter value from outside, correct? If I bind the tree component using ref="myTree" I just receive a JS proxy that I cannot access. This behaviour is so common, is it really impossible to do with PrimeVue?

[yoricktran]

I solved it with plain JS now. But there must a better solution, right?

<Tree
      ref="countryTree"
      :value="nodes"
      :filter="true"
      filterPlaceholder="Search countries..."
      selectionMode="checkbox"
      @filter="setFilter($event)"
    >
      <template #filtericon="slotProps">
        <Button
          v-if="filterTerm && filterTerm.length > 0"
          icon="pi pi-times p-icon
        p-tree-filter-icon"
          severity="secondary"
          text
          size="small"
          aria-label="Cancel"
          class="absolute right-0 h-full focus:!ring-0"
          @click="resetFilter()"
        />
      </template>
    </Tree>

const countryTree = ref(null); // Ref to the Tree component
const filterTerm = ref<string>("");

// Enable the delete icon to reset the input field
const setFilter = ({
  value: term,
  originalEvent: event,
}: TreeFilterEvent) => {
  const _event = event as KeyboardEvent;
  if (term == "" && _event.key.length == 1) {
    term = "x";
  }
  if (term.length == 1 && _event.key == "Backspace") {
    term = "";
  }
  if (term != null && term != filterTerm.value) filterTerm.value = term;
};

const resetFilter = () => {
  filterTerm.value = "";
  let countryTreeEl = countryTree.value as any;
  const filterInput = countryTreeEl.$el.querySelector(
    "input.p-tree-filter-input"
  );
  if (filterInput) {
    filterInput.value = "";
    const event = new Event("input");
    filterInput.dispatchEvent(event);
  }
};