Merge pull request #5233 from nocodb/fix/filter-value

fix(nc-gui): reset filter value to null instead

packages/nc-gui/components/cell/MultiSelect.vue

@@ -32,6 +32,7 @@ interface Props {
   modelValue?: string | string[]
   rowIndex?: number
   disableOptionCreation?: boolean
+  location?: 'cell' | 'filter'
 }
 
 const { modelValue, disableOptionCreation } = defineProps<Props>()
@@ -336,7 +337,7 @@ useEventListener(document, 'click', handleClose, true)
         v-for="op of options"
         :key="op.id || op.title"
         :value="op.title"
-        :data-testid="`select-option-${column.title}-${rowIndex}`"
+        :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
         :class="`nc-select-option-${column.title}-${op.title}`"
         @click.stop
       >

packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue

@@ -85,17 +85,17 @@ const filterUpdateCondition = (filter: FilterType, i: number) => {
   ) {
     // anyof and nanyof can allow multiple selections,
     // while `eq` and `neq` only allow one selection
-    filter.value = ''
+    filter.value = null
   } else if (['blank', 'notblank', 'empty', 'notempty', 'null', 'notnull'].includes(filter.comparison_op!)) {
     // since `blank`, `empty`, `null` doesn't require value,
     // hence remove the previous value
-    filter.value = ''
+    filter.value = null
     filter.comparison_sub_op = ''
   } else if ([UITypes.Date, UITypes.DateTime].includes(col.uidt as UITypes)) {
     // for date / datetime,
     // the input type could be decimal or datepicker / datetime picker
     // hence remove the previous value
-    filter.value = ''
+    filter.value = null
     if (
       !comparisonSubOpList(filter.comparison_op!)
         .map((op) => op.value)
@@ -181,7 +181,7 @@ const selectFilterField = (filter: Filter, index: number) => {
   }
 
   // reset filter value as well
-  filter.value = ''
+  filter.value = null
   saveOrUpdate(filter, index)
 }
 

packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue

@@ -193,6 +193,7 @@ const hasExtraPadding = $computed(() => {
       :column="column"
       class="flex"
       v-bind="componentProps"
+      location="filter"
     />
   </div>
 </template>

tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts

@@ -123,7 +123,7 @@ export class ToolbarFilterPage extends BasePage {
           for (let i = 0; i < v.length; i++) {
             await this.rootPage
               .locator(`.nc-dropdown-multi-select-cell`)
-              .locator(`.nc-select-option-MultiSelect-${v[i]}`)
+              .locator(`[data-testid="select-option-MultiSelect-filter"].nc-select-option-MultiSelect-${v[i]}`)
               .click();
           }
           break;