From 6f36c0fa0ba48356e1b077df5fc97c08193d5b87 Mon Sep 17 00:00:00 2001
From: Corentin Flr <10946971+cogk@users.noreply.github.com>
Date: Fri, 1 Dec 2023 17:09:52 +0100
Subject: [PATCH] fix(form_builder): Use locale-aware sorting and search for
 fieldtypes (#23454)

* fix(form_builder): Use locale-aware string sort and search for DocFields

* fix(form_builder): Fix CSS cursor for DocField autocomplete
---
 .../form_builder/components/Autocomplete.vue  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Autocomplete.vue b/frappe/public/js/form_builder/components/Autocomplete.vue
index 3bbaf8b298..7960047b43 100644
--- a/frappe/public/js/form_builder/components/Autocomplete.vue
+++ b/frappe/public/js/form_builder/components/Autocomplete.vue
@@ -19,7 +19,7 @@
 			<div class="combo-box-items">
 				<ComboboxOption
 					as="template"
-					v-for="(field, i) in filteredOptions"
+					v-for="(field, i) in sortedOptions"
 					:key="i"
 					:value="field"
 					v-slot="{ active }"
@@ -85,11 +85,16 @@ const selectedValue = computed({
 });
 
 const filteredOptions = computed(() => {
-	return query.value
-		? props.options.filter((option) => {
-				return option.label.toLowerCase().includes(query.value.toLowerCase());
-		  })
-		: props.options;
+	if (!query.value) return props.options;
+	return props.options.filter((option) => {
+		return option.label.toLocaleLowerCase().includes(query.value.toLocaleLowerCase());
+	});
+});
+
+const sortedOptions = computed(() => {
+	return filteredOptions.value.sort((a, b) => {
+		return a.label.localeCompare(b.label);
+	});
 });
 
 function clear_search() {
@@ -126,6 +131,8 @@ watch(showOptions, (val) => {
 	border-radius: var(--border-radius-sm);
 	padding: 6px 10px;
 	width: 100%;
+	cursor: pointer;
+	user-select: none;
 
 	&:hover,
 	&.active {