From 2287ae658128cbf529456f8aad669a0e03ee79cf Mon Sep 17 00:00:00 2001
From: Ekaterina Balakina <kato.balakina@gmail.com>
Date: Fri, 18 Nov 2022 02:33:39 +0100
Subject: [PATCH 1/6] use cell inputs for filters input type

---
 .../smartsheet/toolbar/ColumnFilter.vue       |  25 ++-
 .../smartsheet/toolbar/FilterInput.vue        | 159 ++++++++++++++++++
 .../pages/Dashboard/WebhookForm/index.ts      |   2 +-
 .../pages/Dashboard/common/Toolbar/Filter.ts  |   4 +-
 4 files changed, 181 insertions(+), 9 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 9bb1fedc8e..4b4c3eb48f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -100,6 +100,15 @@ watch(
   },
 )
 
+const getColumn = (filter: Filter) => {
+  return columns.value?.find((col) => col.id === filter.fk_column_id)
+}
+
+const selectFilterField = (filter: Filter, index: number) => {
+  filter.value = null
+  saveOrUpdate(filter, index)
+}
+
 const applyChanges = async (hookId?: string, _nested = false) => {
   await sync(hookId, _nested)
 
@@ -198,7 +207,7 @@ defineExpose({
               :columns="columns"
               :disabled="filter.readOnly"
               @click.stop
-              @change="saveOrUpdate(filter, i)"
+              @change="selectFilterField(filter, i)"
             />
 
             <a-select
@@ -231,14 +240,18 @@ defineExpose({
               @change="saveOrUpdate(filter, i)"
             />
 
-            <a-input
+            <LazySmartsheetToolbarFilterInput
               v-else
-              :key="`${i}_7`"
-              v-model:value="filter.value"
               class="nc-filter-value-select"
-              :disabled="filter.readOnly"
+              :column="getColumn(filter)"
+              :filter="filter"
+              @updateFilterValue="
+                (value) => {
+                  filter.value = value
+                  saveOrUpdate(filter, i)
+                }
+              "
               @click.stop
-              @input="saveOrUpdate(filter, i)"
             />
           </template>
         </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
new file mode 100644
index 0000000000..2d1308dc40
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import type { ColumnType } from 'nocodb-sdk'
+import {
+  ColumnInj,
+  EditModeInj,
+  ReadonlyInj,
+  computed,
+  isBoolean,
+  isCurrency,
+  isDate,
+  isDateTime,
+  isDecimal,
+  isDuration,
+  isFloat,
+  isInt,
+  isMultiSelect,
+  isPercent,
+  isRating,
+  isSingleSelect,
+  isTextArea,
+  isTime,
+  isYear,
+  provide,
+  ref,
+  toRef,
+  useProject,
+} from '#imports'
+import type { Filter } from '~/lib'
+import SingleSelect from '~/components/cell/SingleSelect'
+import MultiSelect from '~/components/cell/MultiSelect'
+import DatePicker from '~/components/cell/DatePicker'
+import YearPicker from '~/components/cell/YearPicker'
+import DateTimePicker from '~/components/cell/DateTimePicker'
+import TimePicker from '~/components/cell/TimePicker'
+import Rating from '~/components/cell/Rating'
+import Duration from '~/components/cell/Duration'
+import Percent from '~/components/cell/Percent'
+import Currency from '~/components/cell/Currency'
+import Decimal from '~/components/cell/Decimal'
+import Integer from '~/components/cell/Integer'
+import Float from '~/components/cell/Float'
+import Text from '~/components/cell/Text'
+
+interface Props {
+  column: ColumnType
+  filter: Filter
+}
+
+interface Emits {
+  (event: 'updateFilterValue', model: any): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const column = toRef(props, 'column')
+const editEnabled = ref(true)
+
+provide(ColumnInj, column)
+provide(EditModeInj, readonly(editEnabled))
+provide(ReadonlyInj, ref(false))
+
+const checkTypeFunctions = {
+  isSingleSelect,
+  isMultiSelect,
+  isDate,
+  isYear,
+  isDateTime,
+  isTime,
+  isRating,
+  isDuration,
+  isPercent,
+  isCurrency,
+  isDecimal,
+  isInt,
+  isFloat,
+  isTextArea,
+}
+
+type FilterType = keyof typeof checkTypeFunctions
+
+const { sqlUi } = useProject()
+
+const abstractType = $computed(() => column.value && sqlUi.value.getAbstractType(column.value))
+
+const checkType = (type: FilterType) => {
+  if (!column.value) {
+    return false
+  }
+
+  const checkTypeFunction = checkTypeFunctions[type]
+  if (!checkTypeFunction) {
+    return false
+  }
+  return checkTypeFunction(column.value, abstractType)
+}
+
+const filterInput = computed({
+  get: () => {
+    return props.filter.value
+  },
+  set: (value) => {
+    emit('updateFilterValue', value)
+  },
+})
+
+const booleanOptions = [
+  { value: true, label: 'true' },
+  { value: false, label: 'false' },
+  { value: null, label: 'unset' },
+]
+
+const componentMap: Partial<Record<FilterType & 'default', any>> = {
+  isSingleSelect: SingleSelect,
+  isMultiSelect: MultiSelect,
+  isDate: DatePicker,
+  isYear: YearPicker,
+  isDateTime: DateTimePicker,
+  isTime: TimePicker,
+  isRating: Rating,
+  isDuration: Duration,
+  isPercent: Percent,
+  isCurrency: Currency,
+  isDecimal: Decimal,
+  isInt: Integer,
+  isFloat: Float,
+}
+
+const filterType = $computed(() => {
+  return Object.keys(componentMap).find((key) => checkType(key as FilterType))
+})
+
+const isNumeric = $computed(() => {
+  if (!column.value) {
+    return false
+  }
+  return (
+    isPercent(column.value) || isInt(column.value, abstractType) || isDecimal(column.value) || isFloat(column.value, abstractType)
+  )
+})
+</script>
+
+<template>
+  <a-select
+    v-if="column && isBoolean(column, abstractType)"
+    v-model:value="filterInput"
+    :disabled="filter.readOnly"
+    :options="booleanOptions"
+  />
+  <div v-else class="bg-white border-1 flex min-w-120px max-w-170px min-h-32px h-full px-2" @mouseup.stop>
+    <component
+      :is="filterType ? componentMap[filterType] : Text"
+      v-model="filterInput"
+      :disabled="filter.readOnly"
+      :column="column"
+      :class="{ 'h-32px': isNumeric }"
+    />
+  </div>
+</template>
diff --git a/tests/playwright/pages/Dashboard/WebhookForm/index.ts b/tests/playwright/pages/Dashboard/WebhookForm/index.ts
index 7eff8ebcea..6fdc6e0602 100644
--- a/tests/playwright/pages/Dashboard/WebhookForm/index.ts
+++ b/tests/playwright/pages/Dashboard/WebhookForm/index.ts
@@ -87,7 +87,7 @@ export class WebhookFormPage extends BasePage {
     await this.rootPage.waitForTimeout(1500);
 
     if (operator != 'is null' && operator != 'is not null') {
-      await modal.locator('input.nc-filter-value-select').fill(value);
+      await modal.locator('.nc-filter-value-select > input').fill(value);
     }
 
     if (save) {
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts b/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
index 6c7a8b70c4..f0a536a4d2 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
@@ -18,7 +18,7 @@ export class ToolbarFilterPage extends BasePage {
     await expect(this.get().locator('.nc-filter-field-select').nth(index)).toHaveText(column);
     await expect(this.get().locator('.nc-filter-operation-select').nth(index)).toHaveText(operator);
     await expect
-      .poll(async () => await this.get().locator('input.nc-filter-value-select').nth(index).inputValue())
+      .poll(async () => await this.get().locator('.nc-filter-value-select > input').nth(index).inputValue())
       .toBe(value);
   }
 
@@ -70,7 +70,7 @@ export class ToolbarFilterPage extends BasePage {
       await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
     }
 
-    const fillFilter = this.rootPage.locator('.nc-filter-value-select').last().fill(value);
+    const fillFilter = this.rootPage.locator('.nc-filter-value-select > input').last().fill(value);
     await this.waitForResponse({
       uiAction: fillFilter,
       httpMethodsToMatch: ['GET'],

From b419bf0f2699088fcdf5a7bf14f22272c964333b Mon Sep 17 00:00:00 2001
From: Ekaterina Balakina <kato.balakina@gmail.com>
Date: Sat, 26 Nov 2022 13:09:07 +0100
Subject: [PATCH 2/6] review fixes

---
 packages/nc-gui/components/cell/Duration.vue  |  5 +-
 .../nc-gui/components/cell/MultiSelect.vue    |  9 +-
 .../nc-gui/components/cell/SingleSelect.vue   | 18 +++-
 .../smartsheet/toolbar/FilterInput.vue        | 85 ++++++++++++-------
 4 files changed, 82 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index bcb32c34fc..a6bf5b047d 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -13,9 +13,10 @@ import {
 
 interface Props {
   modelValue: number | string | null | undefined
+  showValidationError: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, showValidationError = true } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -93,7 +94,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
     <span v-else> {{ localState }}</span>
 
-    <div v-if="showWarningMessage" class="duration-warning">
+    <div v-if="showWarningMessage && showValidationError" class="duration-warning">
       <!-- TODO: i18n -->
       Please enter a number
     </div>
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 406c869dda..7269b5691c 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -27,9 +27,10 @@ import MdiCloseCircle from '~icons/mdi/close-circle'
 interface Props {
   modelValue?: string | string[]
   rowIndex?: number
+  disableOptionCreation?: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -303,7 +304,11 @@ const onTagClick = (e: Event, onClose: Function) => {
       </a-tag>
     </a-select-option>
 
-    <a-select-option v-if="searchVal && isOptionMissing && !isPublic" :key="searchVal" :value="searchVal">
+    <a-select-option
+      v-if="searchVal && isOptionMissing && !isPublic && !disableOptionCreation"
+      :key="searchVal"
+      :value="searchVal"
+    >
       <div class="flex gap-2 text-gray-500 items-center h-full">
         <MdiPlusThick class="min-w-4" />
         <div class="text-xs whitespace-normal">
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 0445193150..62e89fae6e 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -14,6 +14,7 @@ import {
   extractSdkResponseErrorMsg,
   inject,
   ref,
+  useEventListener,
   useSelectedCellKeyupListener,
   watch,
 } from '#imports'
@@ -21,9 +22,10 @@ import {
 interface Props {
   modelValue?: string | undefined
   rowIndex?: number
+  disableOptionCreation?: boolean
 }
 
-const { modelValue } = defineProps<Props>()
+const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -176,6 +178,14 @@ const toggleMenu = (e: Event) => {
   }
   isOpen.value = (active.value || editable.value) && !isOpen.value
 }
+
+const handleClose = (e: MouseEvent) => {
+  if (aselect.value && !aselect.value.$el.contains(e.target)) {
+    isOpen.value = false
+  }
+}
+
+useEventListener(document, 'click', handleClose)
 </script>
 
 <template>
@@ -217,7 +227,11 @@ const toggleMenu = (e: Event) => {
       </a-tag>
     </a-select-option>
 
-    <a-select-option v-if="searchVal && isOptionMissing && !isPublic" :key="searchVal" :value="searchVal">
+    <a-select-option
+      v-if="searchVal && isOptionMissing && !isPublic && !disableOptionCreation"
+      :key="searchVal"
+      :value="searchVal"
+    >
       <div class="flex gap-2 text-gray-500 items-center h-full">
         <MdiPlusThick class="min-w-4" />
         <div class="text-xs whitespace-normal">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
index 2d1308dc40..13fad5a871 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
@@ -26,20 +26,20 @@ import {
   useProject,
 } from '#imports'
 import type { Filter } from '~/lib'
-import SingleSelect from '~/components/cell/SingleSelect'
-import MultiSelect from '~/components/cell/MultiSelect'
-import DatePicker from '~/components/cell/DatePicker'
-import YearPicker from '~/components/cell/YearPicker'
-import DateTimePicker from '~/components/cell/DateTimePicker'
-import TimePicker from '~/components/cell/TimePicker'
-import Rating from '~/components/cell/Rating'
-import Duration from '~/components/cell/Duration'
-import Percent from '~/components/cell/Percent'
-import Currency from '~/components/cell/Currency'
-import Decimal from '~/components/cell/Decimal'
-import Integer from '~/components/cell/Integer'
-import Float from '~/components/cell/Float'
-import Text from '~/components/cell/Text'
+import SingleSelect from '~/components/cell/SingleSelect.vue'
+import MultiSelect from '~/components/cell/MultiSelect.vue'
+import DatePicker from '~/components/cell/DatePicker.vue'
+import YearPicker from '~/components/cell/YearPicker.vue'
+import DateTimePicker from '~/components/cell/DateTimePicker.vue'
+import TimePicker from '~/components/cell/TimePicker.vue'
+import Rating from '~/components/cell/Rating.vue'
+import Duration from '~/components/cell/Duration.vue'
+import Percent from '~/components/cell/Percent.vue'
+import Currency from '~/components/cell/Currency.vue'
+import Decimal from '~/components/cell/Decimal.vue'
+import Integer from '~/components/cell/Integer.vue'
+import Float from '~/components/cell/Float.vue'
+import Text from '~/components/cell/Text.vue'
 
 interface Props {
   column: ColumnType
@@ -79,19 +79,17 @@ const checkTypeFunctions = {
 
 type FilterType = keyof typeof checkTypeFunctions
 
-const { sqlUi } = useProject()
+const { sqlUi } = $(useProject())
 
-const abstractType = $computed(() => column.value && sqlUi.value.getAbstractType(column.value))
+const abstractType = $computed(() => column.value && sqlUi?.getAbstractType(column.value))
 
-const checkType = (type: FilterType) => {
-  if (!column.value) {
-    return false
-  }
+const checkType = (filterType: FilterType) => {
+  const checkTypeFunction = checkTypeFunctions[filterType]
 
-  const checkTypeFunction = checkTypeFunctions[type]
-  if (!checkTypeFunction) {
+  if (!column.value || !checkTypeFunction) {
     return false
   }
+
   return checkTypeFunction(column.value, abstractType)
 }
 
@@ -110,7 +108,7 @@ const booleanOptions = [
   { value: null, label: 'unset' },
 ]
 
-const componentMap: Partial<Record<FilterType & 'default', any>> = {
+const componentMap: Partial<Record<FilterType, any>> = {
   isSingleSelect: SingleSelect,
   isMultiSelect: MultiSelect,
   isDate: DatePicker,
@@ -130,12 +128,35 @@ const filterType = $computed(() => {
   return Object.keys(componentMap).find((key) => checkType(key as FilterType))
 })
 
-const isNumeric = $computed(() => {
-  if (!column.value) {
-    return false
+const componentProps = $computed(() => {
+  switch (filterType) {
+    case 'isSingleSelect':
+    case 'isMultiSelect': {
+      return { disableOptionCreation: true }
+    }
+    case 'isPercent':
+    case 'isDecimal':
+    case 'isFloat':
+    case 'isInt': {
+      return { class: 'h-32px' }
+    }
+    case 'isDuration': {
+      return { showValidationError: false }
+    }
+    default: {
+      return {}
+    }
   }
+})
+
+const hasExtraPadding = $computed(() => {
   return (
-    isPercent(column.value) || isInt(column.value, abstractType) || isDecimal(column.value) || isFloat(column.value, abstractType)
+    column.value &&
+    (isInt(column.value, abstractType) ||
+      isDate(column.value, abstractType) ||
+      isDateTime(column.value, abstractType) ||
+      isTime(column.value, abstractType) ||
+      isYear(column.value, abstractType))
   )
 })
 </script>
@@ -147,13 +168,19 @@ const isNumeric = $computed(() => {
     :disabled="filter.readOnly"
     :options="booleanOptions"
   />
-  <div v-else class="bg-white border-1 flex min-w-120px max-w-170px min-h-32px h-full px-2" @mouseup.stop>
+  <div
+    v-else
+    class="bg-white border-1 flex min-w-120px max-w-170px min-h-32px h-full"
+    :class="{ 'px-2': hasExtraPadding }"
+    @mouseup.stop
+  >
     <component
       :is="filterType ? componentMap[filterType] : Text"
       v-model="filterInput"
       :disabled="filter.readOnly"
       :column="column"
-      :class="{ 'h-32px': isNumeric }"
+      class="flex"
+      v-bind="componentProps"
     />
   </div>
 </template>

From 241f925e0a65d191cd7bd84f2619d828073f54ad Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 28 Nov 2022 12:09:08 +0530
Subject: [PATCH 3/6] chore(test): Removed clicking on the single select cell,
 after clearing in single select, since click on clear closes the dropdown

---
 tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
index 82953a7124..bb7389c033 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
@@ -65,7 +65,6 @@ export class SelectOptionCellPageObject extends BasePage {
 
     await this.get({ index, columnHeader }).click();
     await this.rootPage.locator('.ant-select-single > .ant-select-clear').click();
-    await this.cell.get({ index, columnHeader }).click();
     await this.rootPage.locator(`.nc-dropdown-single-select-cell`).waitFor({ state: 'hidden' });
   }
 

From fe94f1adcba93f5fff171badcdfe80e6a22ba8d9 Mon Sep 17 00:00:00 2001
From: Ekaterina Balakina <kato.balakina@gmail.com>
Date: Mon, 28 Nov 2022 16:44:24 +0100
Subject: [PATCH 4/6] fix abstract type

---
 packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
index 13fad5a871..f12b28fed8 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
@@ -81,7 +81,7 @@ type FilterType = keyof typeof checkTypeFunctions
 
 const { sqlUi } = $(useProject())
 
-const abstractType = $computed(() => column.value && sqlUi?.getAbstractType(column.value))
+const abstractType = $computed(() => (column.value?.dt && sqlUi ? sqlUi.getAbstractType(column.value) : null))
 
 const checkType = (filterType: FilterType) => {
   const checkTypeFunction = checkTypeFunctions[filterType]

From 6633362f24e0ef47c393955d91b0039a3091918c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 30 Jan 2023 13:29:22 +0800
Subject: [PATCH 5/6] chore(nc-gui): lint

---
 packages/nc-gui/components/cell/MultiSelect.vue  | 8 +++++++-
 packages/nc-gui/components/cell/SingleSelect.vue | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 810e621c09..6fce902953 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -318,7 +318,13 @@ const onTagClick = (e: Event, onClose: Function) => {
     </a-select-option>
 
     <a-select-option
-      v-if="searchVal && isOptionMissing && !isPublic && !disableOptionCreation && (hasRole('owner', true) || hasRole('creator', true))"
+      v-if="
+        searchVal &&
+        isOptionMissing &&
+        !isPublic &&
+        !disableOptionCreation &&
+        (hasRole('owner', true) || hasRole('creator', true))
+      "
       :key="searchVal"
       :value="searchVal"
     >
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index f652f9d7d3..ed206e8eef 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -241,7 +241,13 @@ useEventListener(document, 'click', handleClose)
       </a-tag>
     </a-select-option>
     <a-select-option
-      v-if="searchVal && isOptionMissing && !isPublic && !disableOptionCreation && (hasRole('owner', true) || hasRole('creator', true))"
+      v-if="
+        searchVal &&
+        isOptionMissing &&
+        !isPublic &&
+        !disableOptionCreation &&
+        (hasRole('owner', true) || hasRole('creator', true))
+      "
       :key="searchVal"
       :value="searchVal"
     >

From 087ef2e7acc9bc62a2744cbfbfee3c5ed151d6ce Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 30 Jan 2023 13:44:37 +0800
Subject: [PATCH 6/6] chore(nc-gui): hyphenate v-on event

---
 packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 73d1240f82..a00e68686c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -256,7 +256,7 @@ defineExpose({
               class="nc-filter-value-select"
               :column="getColumn(filter)"
               :filter="filter"
-              @updateFilterValue="
+              @update-filter-value="
                 (value) => {
                   filter.value = value
                   saveOrUpdate(filter, i)