From b345ad5fe01a34369ebcf714950803cfe6e1bf34 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 12:05:30 +0530
Subject: [PATCH] fix: focus on fields label after adding it

---
 .../js/form_builder/components/EditableInput.vue     | 12 +++++++-----
 frappe/public/js/form_builder/components/Field.vue   |  6 +++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/components/EditableInput.vue b/frappe/public/js/form_builder/components/EditableInput.vue
index 21b517af3b..11ebb10a3f 100644
--- a/frappe/public/js/form_builder/components/EditableInput.vue
+++ b/frappe/public/js/form_builder/components/EditableInput.vue
@@ -5,13 +5,13 @@ let store = useStore();
 
 const props = defineProps({
 	text: {
-		type: String
+		type: String,
 	},
 	placeholder: {
-		default: __("No Label")
+		default: __("No Label"),
 	},
 	empty_label: {
-		default: __("No Label")
+		default: __("No Label"),
 	},
 });
 
@@ -35,6 +35,8 @@ function focus_on_label() {
 		nextTick(() => input_text.value.focus());
 	}
 }
+
+defineExpose({ focus_on_label });
 </script>
 
 <template>
@@ -48,12 +50,12 @@ function focus_on_label() {
 			:placeholder="placeholder"
 			:value="text"
 			:style="{ width: hidden_span_width }"
-			@input="event => $emit('update:modelValue', event.target.value)"
+			@input="(event) => $emit('update:modelValue', event.target.value)"
 			@keydown.enter="editing = false"
 			@blur="editing = false"
 			@click.stop
 		/>
-		<span v-else-if="text" v-html="text" ></span>
+		<span v-else-if="text" v-html="text"></span>
 		<i v-else class="text-muted">
 			{{ empty_label }}
 		</i>
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 99730c15d4..f96055aba7 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -2,12 +2,13 @@
 import EditableInput from "./EditableInput.vue";
 import { useStore } from "../store";
 import { move_children_to_parent, clone_field } from "../utils";
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import AddFieldButton from "./AddFieldButton.vue";
 
 const props = defineProps(["column", "field"]);
 const store = useStore();
 
+const label_input = ref(null);
 const hovered = ref(false);
 const selected = computed(() => store.selected(props.field.df.name));
 const component = computed(() => {
@@ -55,6 +56,8 @@ function duplicate_field() {
 	props.column.fields.splice(index + 1, 0, duplicate_field);
 	store.form.selected_field = duplicate_field.df;
 }
+
+onMounted(() => label_input.value.focus_on_label());
 </script>
 
 <template>
@@ -74,6 +77,7 @@ function duplicate_field() {
 			<template #label>
 				<div class="field-label">
 					<EditableInput
+						ref="label_input"
 						:text="field.df.label"
 						:placeholder="__('Label')"
 						:empty_label="`${__('No Label')} (${field.df.fieldtype})`"