From dc3d89d584290db9128ff369d50d56439bfaa17f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 31 May 2022 11:47:01 +0530
Subject: [PATCH] enhancement: open autocomplete menu on focus

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../spreadsheet/components/ColumnFilter.vue   | 32 +++------
 .../FieldListAutoCompleteDropdown.vue         | 66 +++++++++++++++++++
 .../spreadsheet/components/SortListMenu.vue   | 31 ++-------
 3 files changed, 79 insertions(+), 50 deletions(-)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue

diff --git a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
index eba2c39cc5..f5b4007fa1 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
@@ -92,36 +92,16 @@
               </template>
             </v-select>
 
-            <v-autocomplete
+            <field-list-auto-complete-dropdown
               :key="i + '_6'"
               v-model="filter.fk_column_id"
               class="caption nc-filter-field-select"
-              :items="columns"
-              :placeholder="$t('objects.field')"
-              solo
-              flat
-              dense
+              :columns="columns"
               :disabled="filter.readOnly"
-              hide-details
-              item-value="id"
-              item-text="title"
               @click.stop
               @change="saveOrUpdate(filter, i)"
-            >
-              <template #item="{ item }">
-                <span :class="`caption font-weight-regular nc-filter-fld-${item.title}`">
-                  <v-icon small class="mr-1">
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.title }}
-                </span>
-              </template>
-              <template #selection="{item}">
-                <v-icon small class="mr-1">
-                  {{ item.icon }}
-                </v-icon> {{ item.title }}
-              </template>
-            </v-autocomplete>
+            />
+
             <v-select
               :key="'k' + i"
               v-model="filter.comparison_op"
@@ -189,9 +169,13 @@
 
 <script>
 import { getUIDTIcon, UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
+import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
 
 export default {
   name: 'ColumnFilter',
+  components: {
+    FieldListAutoCompleteDropdown
+  },
   props: {
     fieldList: [Array],
     meta: Object,
diff --git a/packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue
new file mode 100644
index 0000000000..27a3617d6e
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue
@@ -0,0 +1,66 @@
+<template>
+  <v-autocomplete
+    ref="field"
+    v-model="localValue"
+    class="caption"
+    :items="columns"
+    item-value="id"
+    item-text="title"
+    :label="$t('objects.field')"
+    solo
+    flat
+    dense
+    hide-details
+    @click.stop
+    @change="$emit('change')"
+  >
+    <template #selection="{item}">
+      <v-icon small class="mr-1">
+        {{ item.icon }}
+      </v-icon> {{ item.title }}
+    </template>
+    <template #item="{ item }">
+      <span
+        :class="`caption font-weight-regular nc-fld-${item.title}`"
+      >
+        <v-icon color="grey" small class="mr-1">
+          {{ item.icon }}
+        </v-icon>
+        {{ item.title }}
+      </span>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+export default {
+  name: 'FieldListAutoCompleteDropdown',
+  props: {
+    columns: Array,
+    value: String
+  },
+  computed: {
+    localValue: {
+      set(v) {
+        this.$emit('input', v)
+      },
+      get() {
+        return this.value
+      }
+    }
+  },
+  mounted() {
+    const autocompleteInput = this.$refs.field.$refs.input
+    autocompleteInput.addEventListener('focus', this.onFocus, true)
+  },
+  methods: {
+    onFocus(e) {
+      this.$refs.field.isMenuActive = true // open item list
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
index 31d8f3e5e5..2a7777eb39 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
@@ -41,37 +41,14 @@
             mdi-close-box
           </v-icon>
 
-          <v-autocomplete
+          <field-list-auto-complete-dropdown
             :key="i + 'sel1'"
             v-model="sort.fk_column_id"
             class="caption nc-sort-field-select"
-            :items="columns"
-            item-value="id"
-            item-text="title"
-            :label="$t('objects.field')"
-            solo
-            flat
-            dense
-            hide-details
+            :columns="columns"
             @click.stop
             @change="saveOrUpdate(sort, i)"
-          >
-            <template #selection="{item}">
-              <v-icon small class="mr-1">
-                {{ item.icon }}
-              </v-icon> {{ item.title }}
-            </template>
-            <template #item="{ item }">
-              <span
-                :class="`caption font-weight-regular nc-sort-fld-${item.title}`"
-              >
-                <v-icon color="grey darken-4" small class="mr-1">
-                  {{ item.icon }}
-                </v-icon>
-                {{ item.title }}
-              </span>
-            </template>
-          </v-autocomplete>
+          />
           <v-select
             :key="i + 'sel2'"
             v-model="sort.direction"
@@ -108,9 +85,11 @@
 <script>
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
+import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
 
 export default {
   name: 'SortListMenu',
+  components: { FieldListAutoCompleteDropdown },
   props: {
     fieldList: Array,
     value: [Array, Object],