Column Filter: Expose 'applyFilter' method

[ghost]

Describe the feature you would like to see added

Expose the applyFilter method to custom filter template can be handful in order to close the overlay on keydown event for example

Is your feature request related to a problem?

No response

Describe the solution you'd like

No response

Describe alternatives you have considered

No response

Additional context

No response

[tugcekucukoglu]

Thanks for the PR. I looked into it but calling the applyFilter method still closes the overlay panel. Am I missing something?

[ghost]

Yes, that's exactly the purpose of the PR, here is a code sample to better understand the request:

With only filterCallback apply the filter and the overlay stays open:

<Column field="name" header="Name" style="min-width:12rem">
                    <template #body="{data}">
                        {{data.name}}
                    </template>
                    <template #filter="{filterModel,filterCallback}">
                        <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - `" v-tooltip.top.focus="'Hit enter key to filter'"/>
                    </template>
                </Column>

With applyFilter it will apply the filter and close the overlay:

<Column field="name" header="Name" style="min-width:12rem">
                    <template #body="{data}">
                        {{data.name}}
                    </template>
                    <template #filter="{filterModel,applyFilter}">
                        <InputText type="text" v-model="filterModel.value" @keydown.enter="applyFilter()" class="p-column-filter" :placeholder="`Search by name - `" v-tooltip.top.focus="'Hit enter key to filter'"/>
                    </template>
                </Column>

[eness]

this feature does not work as mentioned, in the latest version.

Try it on this official filter features demo : https://stackblitz.com/run?file=src%2FApp.vue

Replace Name column's filter as below and try to search something by pressing Enter key.

<template #filter="{ filterModel, applyFilter }">
       <InputText v-model="filterModel.value" @keydown.enter="applyFilter()" type="text" class="p-column-filter" placeholder="Search by name" />
</template>

[ghost]

this feature does not work as mentioned, in the latest version.

what does not work? what are you expecting?

Try it on this official filter features demo : https://stackblitz.com/run?file=src%2FApp.vue

This link won't work directly

Replace Name column's filter as below and try to search something by pressing Enter key.

<template #filter="{ filterModel, applyFilter }">
       <InputText v-model="filterModel.value" @keydown.enter="applyFilter()" type="text" class="p-column-filter" placeholder="Search by name" />
</template>

You may need to use keydown.enter.prevent instead

[eness]

Thank you @BenjaminMINK keydown.enter.prevent solved the issue. Official examples do not mention this.