From 4c78705cbb0360a0342cfd324bec9345aa90d2c8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 14 Jul 2022 11:53:09 +0530
Subject: [PATCH] fix: provide unique key value

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../spreadsheet/components/ColumnFilter.vue   | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
index 3d769b69ef..03ee9ca060 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
@@ -7,14 +7,12 @@
             <div class="d-flex" style="gap: 6px; padding: 0 6px">
               <v-icon
                 v-if="!filter.readOnly"
-                :key="i + '_3'"
                 small
                 class="nc-filter-item-remove-btn"
                 @click.stop="deleteFilter(filter, i)"
               >
                 mdi-close-box
               </v-icon>
-              <span v-else :key="i + '_1'" />
               <v-select
                 v-model="filter.logical_op"
                 class="flex-shrink-1 flex-grow-0 elevation-0 caption"
@@ -50,7 +48,7 @@
           <template v-else>
             <v-icon
               v-if="!filter.readOnly"
-              :key="i + '_3'"
+              :key="i + '_1'"
               small
               class="nc-filter-item-remove-btn"
               @click.stop="deleteFilter(filter, i)"
@@ -62,7 +60,7 @@
 
             <v-select
               v-else
-              :key="i + '_4'"
+              :key="i + '_2'"
               v-model="filter.logical_op"
               class="flex-shrink-1 flex-grow-0 elevation-0 caption"
               :items="['and', 'or']"
@@ -80,7 +78,7 @@
             </v-select>
 
             <field-list-auto-complete-dropdown
-              :key="i + '_6'"
+              :key="i + '_3'"
               v-model="filter.fk_column_id"
               class="caption nc-filter-field-select"
               :columns="columns"
@@ -90,7 +88,7 @@
             />
 
             <v-select
-              :key="'k' + i"
+              :key="i + '_4'"
               v-model="filter.comparison_op"
               class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select"
               :items="filterComparisonOp(filter)"
@@ -110,11 +108,11 @@
                 <span class="caption font-weight-regular">{{ item.text }}</span>
               </template>
             </v-select>
-            <span v-else :key="'span1' + i"></span>
-            <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="'span2' + i" />
+            <span v-else :key="i + '_4'"></span>
+            <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="i + '_5'" />
             <v-checkbox
               v-else-if="types[filter.field] === 'boolean'"
-              :key="i + '_7'"
+              :key="i + '_5'"
               v-model="filter.value"
               dense
               :disabled="filter.readOnly"
@@ -122,7 +120,7 @@
             />
             <v-text-field
               v-else-if="filter && filter.fk_column_id"
-              :key="i + '_7'"
+              :key="i + '_5'"
               v-model="filter.value"
               solo
               flat
@@ -133,7 +131,7 @@
               @click.stop
               @input="saveOrUpdate(filter, i)"
             />
-            <span v-else :key="'span1' + i"></span>
+            <span v-else :key="i + '_5'"></span>
           </template>
         </template>
       </template>