From e9bbd2fba7a9729bc1650d476bea9c931e84349e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 23:42:22 +0530
Subject: [PATCH] feat: filterable autocomplete

---
 frontend/src/components/Controls/Link.vue     |  1 +
 .../src/components/frappe-ui/Autocomplete.vue | 40 ++++++++++++++-----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 0f79b2b6..65876400 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -10,6 +10,7 @@
       :size="attrs.size || 'sm'"
       :variant="attrs.variant"
       :placeholder="attrs.placeholder"
+      :filterable="false"
     >
       <template #target="{ open, togglePopover }">
         <slot name="target" v-bind="{ open, togglePopover }" />
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index 9e641b9a..3ea95e2d 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -121,14 +121,36 @@ import {
 import { Popover, Button, FeatherIcon } from 'frappe-ui'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 
-const props = defineProps([
-  'modelValue',
-  'options',
-  'placeholder',
-  'variant',
-  'size',
-  'disabled',
-])
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  variant: {
+    type: String,
+    default: 'subtle',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+})
 const emit = defineEmits(['update:modelValue', 'update:query', 'change'])
 
 const query = ref('')
@@ -170,7 +192,7 @@ const groups = computed(() => {
         key: i,
         group: group.group,
         hideLabel: group.hideLabel || false,
-        items: filterOptions(group.items),
+        items: props.filterable ? filterOptions(group.items) : group.items,
       }
     })
     .filter((group) => group.items.length > 0)