From f441533c2ec40c1bb93ab69437e6aea14fb4831a Mon Sep 17 00:00:00 2001
From: Amit Joki <amitjoki@gmail.com>
Date: Fri, 25 Mar 2022 21:51:11 +0530
Subject: [PATCH] handle commas correctly in multi select options (#1531)

---
 .../editColumn/customSelectOptions.vue          | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
index aa52076a5d..ea17a56761 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn/customSelectOptions.vue
@@ -8,7 +8,14 @@
       >
         mdi-arrow-down-drop-circle
       </v-icon>
-      <v-text-field v-model="localState[i]" class="caption" outlined dense />
+      <v-text-field
+        :autofocus="true"
+        :value="localState[i]"
+        @input="listenForComma(i, $event)"
+        class="caption"
+        dense
+        outlined
+      />
       <v-icon class="ml-2" color="error lighten-2" size="13" @click="localState.splice(i,1)">
         mdi-close
       </v-icon>
@@ -60,6 +67,14 @@ export default {
   methods: {
     syncState() {
       this.localState = (this.value || '').split(',').map(v => v.replace(/\\'/g, '\'').replace(/^'|'$/g, ''))
+    },
+    listenForComma(index, value) {
+      const normalisedValue = value.trim()
+      if (normalisedValue.endsWith(',')) {
+        this.localState.push('')
+        return
+      }
+      this.localState[index] = normalisedValue
     }
   }
 }