From d95b3b6fb06c7e06ecf226889af189f38f9b503a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 20:28:31 +0530
Subject: [PATCH] feat: created autocomplete component to control options with
 up/down key

---
 frappe/public/js/form_builder/FormBuilder.vue |   2 +-
 .../components/AddFieldButton.vue             |  70 +++----
 .../form_builder/components/Autocomplete.vue  | 182 ++++++++++++------
 .../form_builder/components/EditableInput.vue |   1 -
 .../js/form_builder/components/Field.vue      |   6 +-
 package.json                                  |   3 +-
 yarn.lock                                     |   5 +
 7 files changed, 168 insertions(+), 101 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index 193bfd315c..ff9cb9bdd4 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -41,7 +41,7 @@ onMounted(() => store.fetch());
 			</div>
 		</div>
 	</div>
-	<div id="drop-down-area" />
+	<div id="autocomplete-area" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index c9495e9b1e..28727f6075 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -3,14 +3,22 @@
 		ref="add_field_btn_ref"
 		class="add-field-btn btn btn-xs btn-icon"
 		:title="__('Add field')"
-		@click="toggle_fieldtype_dropdown"
+		@click.stop="toggle_fieldtype_options"
 	>
 		<slot>
 			{{ __("Add a field") }}
 		</slot>
-		<Teleport to="#drop-down-area">
-			<div class="drop-down" ref="dropdown_ref">
-				<Autocomplete v-if="show" :items="fields" v-model="search_text" />
+		<Teleport to="#autocomplete-area">
+			<div class="autocomplete" ref="autocomplete_ref">
+				<div v-show="show">
+					<Autocomplete
+						v-model:show="show"
+						:value="autocomplete_value"
+						:options="fields"
+						@change="add_new_field"
+						placeholder="Search fieldtypes..."
+					/>
+				</div>
 			</div>
 		</Teleport>
 	</button>
@@ -22,6 +30,7 @@ import { useStore } from "../store";
 import { clone_field } from "../utils";
 import { createPopper } from "@popperjs/core";
 import { computed, nextTick, ref, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
 
 const store = useStore();
 
@@ -36,7 +45,7 @@ const props = defineProps({
 	},
 });
 
-const emit = defineEmits(["update:modelValue", "update_parent"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const selected = computed(() => {
 	let fieldname = props.field ? props.field.df.name : props.column.df.name;
@@ -44,46 +53,31 @@ const selected = computed(() => {
 });
 
 const show = ref(false);
-const search_text = ref("");
+const autocomplete_value = ref("");
 const fields = computed(() => {
 	let fields = frappe.model.all_fieldtypes
 		.filter((df) => {
 			if (in_list(frappe.model.layout_fields, df)) {
 				return false;
 			}
-			if (search_text.value) {
-				if (df.toLowerCase().includes(search_text.value.toLowerCase())) {
-					return true;
-				}
-				return false;
-			} else {
-				return true;
-			}
+			return true;
 		})
 		.map((df) => {
-			let out = {
-				label: df,
-				onClick: () => {
-					let new_field = {
-						df: store.get_df(df),
-						table_columns: [],
-					};
-
-					add_new_field(clone_field(new_field));
-				},
-			};
+			let out = { label: df };
 			return out;
 		});
 	return [...fields];
 });
 
 const add_field_btn_ref = ref(null);
-const dropdown_ref = ref(null);
+const autocomplete_ref = ref(null);
 const popper = ref(null);
 
+onClickOutside(add_field_btn_ref, () => (show.value = false), { ignore: [autocomplete_ref] });
+
 function setupPopper() {
 	if (!popper.value) {
-		popper.value = createPopper(add_field_btn_ref.value, dropdown_ref.value, {
+		popper.value = createPopper(add_field_btn_ref.value, autocomplete_ref.value, {
 			placement: "bottom-start",
 			modifiers: [
 				{
@@ -99,22 +93,32 @@ function setupPopper() {
 	}
 }
 
-function toggle_fieldtype_dropdown() {
+function toggle_fieldtype_options() {
 	show.value = !show.value;
-	search_text.value = "";
+	autocomplete_value.value = "";
 	nextTick(() => setupPopper());
 }
 
 function add_new_field(field) {
+	fieldtype = field?.label;
+
+	if (!fieldtype) return;
+
+	let new_field = {
+		df: store.get_df(fieldtype),
+		table_columns: [],
+	};
+
+	let cloned_field = clone_field(new_field);
+
 	// insert new field after current field
 	let index = 0;
 	if (props.field) {
 		index = props.column.fields.indexOf(props.field);
 	}
-	props.column.fields.splice(index + 1, 0, field);
-	store.form.selected_field = field.df;
+	props.column.fields.splice(index + 1, 0, cloned_field);
+	store.form.selected_field = cloned_field.df;
 	show.value = false;
-	emit("update_parent");
 }
 
 watch(selected, (val) => {
@@ -123,7 +127,7 @@ watch(selected, (val) => {
 </script>
 
 <style lang="scss" scoped>
-.drop-down {
+.autocomplete {
 	z-index: 100;
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/Autocomplete.vue b/frappe/public/js/form_builder/components/Autocomplete.vue
index 9cf3bd3c64..2ded948e27 100644
--- a/frappe/public/js/form_builder/components/Autocomplete.vue
+++ b/frappe/public/js/form_builder/components/Autocomplete.vue
@@ -1,97 +1,159 @@
 <template>
-	<div class="drop-down">
-		<div class="search-box">
-			<input
-				ref="searchInput"
-				class="search-input form-control"
-				type="text"
-				:placeholder="__('Search field...')"
-				@input="(event) => $emit('update:modelValue', event.target.value)"
-				:value="modelValue"
-				@click.stop
-			/>
-			<span class="search-icon">
-				<div v-html="frappe.utils.icon('search', 'sm')"></div>
-			</span>
-		</div>
-		<div class="drop-down-list">
-			<button
-				class="btn drop-down-item"
-				v-for="(item, i) in items"
-				:key="i"
-				@click.stop="(i) => item.onClick(i)"
-			>
-				<slot>{{ item.label }}</slot>
-			</button>
-		</div>
-	</div>
+	<Combobox v-model="selectedValue" nullable>
+		<ComboboxOptions class="combo-box-options" static>
+			<div class="search-box">
+				<ComboboxInput
+					ref="search"
+					class="search-input form-control"
+					type="text"
+					@change="(e) => (query = e.target.value)"
+					:value="query"
+					:placeholder="props.placeholder"
+					autocomplete="off"
+					@click.stop
+				/>
+				<button class="clear-button btn btn-sm" @click="clear_search">
+					<div v-html="frappe.utils.icon('close', 'sm')" />
+				</button>
+			</div>
+			<div class="combo-box-items">
+				<ComboboxOption
+					as="template"
+					v-for="(field, i) in filteredOptions"
+					:key="i"
+					:value="field"
+					v-slot="{ active }"
+				>
+					<li :class="['combo-box-option', active ? 'active' : '']">
+						{{ field.label }}
+					</li>
+				</ComboboxOption>
+			</div>
+		</ComboboxOptions>
+	</Combobox>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from "@headlessui/vue";
+import { computed, ref, useAttrs, watch, nextTick } from "vue";
 
 const props = defineProps({
-	items: {
+	options: {
 		type: Array,
-		required: true,
+		default: [],
+	},
+	placeholder: {
+		type: String,
+		default: "",
 	},
 	modelValue: {
 		type: String,
 		default: "",
 	},
+	show: {
+		type: Boolean,
+		default: false,
+	},
 });
 
-const searchInput = ref(null);
+const emit = defineEmits(["update:modelValue", "update:show", "change"]);
+const attrs = useAttrs();
 
-onMounted(() => {
-	searchInput.value.focus();
+const query = ref(null);
+const search = ref(null);
+
+const showOptions = computed({
+	get() {
+		return props.show;
+	},
+	set(val) {
+		emit("update:show", val);
+	},
+});
+
+const selectedValue = computed({
+	get() {
+		return attrs.value;
+	},
+	set(val) {
+		query.value = "";
+		if (val) {
+			showOptions.value = false;
+		}
+		emit("change", val);
+	},
+});
+
+const filteredOptions = computed(() => {
+	return query.value
+		? props.options.filter((option) => {
+				return option.label.toLowerCase().includes(query.value.toLowerCase());
+		  })
+		: props.options;
+});
+
+function clear_search() {
+	selectedValue.value = "";
+	search.value.el.focus();
+}
+
+watch(showOptions, (val) => {
+	if (val) {
+		nextTick(() => {
+			search.value.el.focus();
+		});
+	}
 });
 </script>
 
 <style lang="scss" scoped>
-.drop-down {
-	display: inline-block;
-	background-color: var(--fg-color);
-	box-shadow: var(--shadow-base) !important;
-	border-radius: var(--border-radius-sm);
-	top: 30px;
-	right: 0;
-	width: 170px;
-	z-index: 99999999;
+.combo-box {
+	z-index: 100;
 }
 
-.drop-down-list {
-	overflow-y: auto;
-	max-height: 250px;
-	text-align: left;
-	padding: 0 6px 6px;
+.combo-box-options {
+	width: 100%;
+	background-color: var(--white);
+	border-radius: var(--border-radius-lg);
+	box-shadow: var(--shadow-2xl);
+	padding: 0;
 }
 
-.drop-down-item {
+.combo-box-option {
 	font-size: small;
 	text-align: left;
 	border-radius: var(--border-radius-sm);
-	margin: 1px 0px;
+	padding: 6px 10px;
 	width: 100%;
 
-	&:hover {
+	&:hover,
+	&.active {
 		background-color: var(--bg-light-gray);
 	}
 }
 
-.search-box {
-	padding: 6px;
-	.search-input {
-		padding-left: 30px;
-		font-size: small;
-		width: 100% !important;
-		background-color: var(--control-bg) !important;
-	}
+.combo-box-items {
+	max-height: 200px;
+	padding: 5px;
+	padding-top: 0px;
+	overflow-y: auto;
+}
 
-	.search-icon {
+.search-box {
+	position: relative;
+	padding: 6px;
+	.clear-button {
 		position: absolute;
-		left: 13px;
-		top: 8px;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+	}
+	.search-input {
+		width: 100%;
 	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/EditableInput.vue b/frappe/public/js/form_builder/components/EditableInput.vue
index 11ebb10a3f..34593460ee 100644
--- a/frappe/public/js/form_builder/components/EditableInput.vue
+++ b/frappe/public/js/form_builder/components/EditableInput.vue
@@ -72,7 +72,6 @@ defineExpose({ focus_on_label });
 
 	&:focus {
 		outline: none;
-		border-radius: var(--border-radius);
 		background-color: inherit;
 	}
 
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 3b8a0dd6cb..c38a6961e8 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -93,11 +93,7 @@ onMounted(() => selected.value && label_input.value.focus_on_label());
 			</template>
 			<template #actions>
 				<div class="field-actions" :hidden="store.read_only">
-					<AddFieldButton
-						:column="column"
-						:field="field"
-						@update_parent="hovered = false"
-					>
+					<AddFieldButton :column="column" :field="field">
 						<div v-html="frappe.utils.icon('add', 'sm')" />
 					</AddFieldButton>
 					<button
diff --git a/package.json b/package.json
index 63907dee69..e545f5e601 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,10 @@
   },
   "homepage": "https://frappeframework.com",
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
     "@editorjs/editorjs": "^2.26.3",
     "@frappe/esbuild-plugin-postcss2": "^0.1.3",
+    "@headlessui/vue": "^1.7.16",
+    "@popperjs/core": "^2.11.2",
     "@redis/client": "^1.5.8",
     "@vue-flow/background": "^1.1.0",
     "@vue-flow/core": "^1.16.2",
diff --git a/yarn.lock b/yarn.lock
index 1acca7916f..7b128fdb54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -55,6 +55,11 @@
     stylus "^0.x"
     tmp "^0.2.1"
 
+"@headlessui/vue@^1.7.16":
+  version "1.7.16"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.16.tgz#bdc9d32d329248910325539b99e6abfce0c69f89"
+  integrity sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==
+
 "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"