Merge pull request #2191 from nocodb/feat/2180-autocomplete-in-filter-sort

enhancement: use autocomplete in sort or filter fields

packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue

@@ -92,36 +92,16 @@
               </template>
             </v-select>
 
-            <v-select
+            <field-list-auto-complete-dropdown
               :key="i + '_6'"
               v-model="filter.fk_column_id"
               class="caption nc-filter-field-select"
-              :items="columns"
+              :columns="columns"
-              :placeholder="$t('objects.field')"
-              solo
-              flat
-              dense
               :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-select>
             <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,

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>

packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue

@@ -41,37 +41,14 @@
             mdi-close-box
           </v-icon>
 
-          <v-select
+          <field-list-auto-complete-dropdown
             :key="i + 'sel1'"
             v-model="sort.fk_column_id"
             class="caption nc-sort-field-select"
-            :items="columns"
+            :columns="columns"
-            item-value="id"
-            item-text="title"
-            :label="$t('objects.field')"
-            solo
-            flat
-            dense
-            hide-details
             @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-select>
           <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],

scripts/cypress/support/page_objects/mainPage.js

@@ -297,12 +297,13 @@ export class _mainPage {
 
         cy.snipActiveMenu("Menu_SortField");
 
-        cy.get(".nc-sort-field-select div").first().click();
+        cy.get(".nc-sort-field-select div").first().click().type(field);
         cy.snipActiveMenu("Menu_SortField_fieldSelection");
         // cy.get(`.menuable__content__active .v-list-item:contains(${field})`)
         //     .first()
         //     .click();
-        cy.getActiveMenu().find(`.nc-sort-fld-${field}`).click();
+        // cy.wait(3000)
+        cy.getActiveMenu().find(`.nc-fld-${field}`).should('exist').click();
         cy.get(".nc-sort-dir-select div").first().click();
         cy.snipActiveMenu("Menu_SortField_criteriaSelection");
         cy.get(
@@ -319,15 +320,15 @@ export class _mainPage {
 
     filterField = (field, operation, value) => {
         cy.get(".nc-filter-menu-btn").click();
-        cy.wait(2000);
+        // cy.wait(2000);
         cy.contains("Add Filter").click();
-        cy.wait(2000);
+        // cy.wait(2000);
         cy.snipActiveMenu("Menu_FilterField");
 
-        cy.get(".nc-filter-field-select").should("exist").last().click();
+        cy.get(".nc-filter-field-select").should("exist").last().click().type(field);;
         cy.snipActiveMenu("Menu_FilterField-fieldSelect");
 
-        cy.getActiveMenu().find(`.nc-filter-fld-${field}`).click();
+        cy.getActiveMenu().find(`.nc-fld-${field}`).should('exist').click();
         cy.get(".nc-filter-operation-select").should("exist").last().click();
         cy.snipActiveMenu("Menu_FilterField-operationSelect");