From dc16eaee2b979aa6aedc0982a71120b279389ed9 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 10 Aug 2022 10:51:31 +0300
Subject: [PATCH] feat(gui-v2): focus new added option on select options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/smartsheet-column/SelectOptions.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
index 2b7d9db678..ce37a76836 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
@@ -8,16 +8,17 @@ import MdiArrowDownDropCircle from '~icons/mdi/arrow-down-drop-circle'
 import MdiClose from '~icons/mdi/close'
 import MdiPlusIcon from '~icons/mdi/plus'
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState, setAdditionalValidations } = useColumnCreateStoreOrThrow()
 
 let options = $ref<any[]>([])
 const colorMenus = $ref<any>({})
 const colors = $ref(enumColor.light)
+const inputs = ref()
 
 const validators = {
   'colOptions.options': [
     {
-      validator: (_: any, opt: any) => {
+      validator: (_: any, _opt: any) => {
         return new Promise<void>((resolve, reject) => {
           for (const opt of options) {
             if (!opt.title.length) {
@@ -74,6 +75,13 @@ onMounted(() => {
     op.title = op.title.replace(/^'/, '').replace(/'$/, '')
   }
 })
+
+// focus last created input
+watch(inputs, () => {
+  if (inputs.value?.$el) {
+    inputs.value.$el.focus()
+  }
+})
 </script>
 
 <template>
@@ -88,7 +96,7 @@ onMounted(() => {
             </template>
             <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
           </a-dropdown>
-          <a-input v-model:value="element.title" class="caption" />
+          <a-input ref="inputs" v-model:value="element.title" class="caption" />
           <MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" />
         </div>
       </template>