From 42b38ec8433189d8482b51b1b8a2afd6efecab25 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 11 Feb 2023 16:46:23 +0800
Subject: [PATCH] feat(nc-gui): use MultiSelect for SingleSelect columns for
 anyof / nanyof filters

---
 .../smartsheet/toolbar/FilterInput.vue        | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
index 2c06ec73b6..b2fb2f08ed 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
@@ -112,22 +112,24 @@ const booleanOptions = [
   { value: null, label: 'unset' },
 ]
 
-const componentMap: Partial<Record<FilterType, any>> = {
-  // use MultiSelect for SingleSelect columns for anyof / nanyof filters
-  isSingleSelect: ['anyof', 'nanyof'].includes(props.filter.comparison_op) ? MultiSelect : 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 componentMap: Partial<Record<FilterType, any>> = $computed(() => {
+  return {
+    // use MultiSelect for SingleSelect columns for anyof / nanyof filters
+    isSingleSelect: ['anyof', 'nanyof'].includes(props.filter.comparison_op) ? MultiSelect : 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))