From 28ec1446753eb15af615987fbc2601bd2d1ae2a7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 16 Nov 2022 19:23:31 +0530
Subject: [PATCH] fix: remove label focus outline while editing

also added tooltip to know double click to edit label
---
 frappe/public/js/form_builder/components/EditableInput.vue | 4 ++--
 frappe/public/js/form_builder/components/FormBuilder.vue   | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frappe/public/js/form_builder/components/EditableInput.vue b/frappe/public/js/form_builder/components/EditableInput.vue
index aa47130479..0dd969f7be 100644
--- a/frappe/public/js/form_builder/components/EditableInput.vue
+++ b/frappe/public/js/form_builder/components/EditableInput.vue
@@ -38,7 +38,7 @@ function focus_on_label() {
 </script>
 
 <template>
-	<div @dblclick="focus_on_label">
+	<div @dblclick="focus_on_label" :title="__('Double click to edit label')">
 		<input
 			v-if="editing"
 			class="input-text"
@@ -69,7 +69,7 @@ function focus_on_label() {
 	margin-left: -2px;
 
 	&:focus {
-		outline: 1px solid var(--primary);
+		outline: none;
 		border-radius: var(--border-radius);
 	}
 
diff --git a/frappe/public/js/form_builder/components/FormBuilder.vue b/frappe/public/js/form_builder/components/FormBuilder.vue
index 072bb27cf8..d4144eccde 100644
--- a/frappe/public/js/form_builder/components/FormBuilder.vue
+++ b/frappe/public/js/form_builder/components/FormBuilder.vue
@@ -130,6 +130,10 @@ onMounted(() => store.fetch());
 					background-color: var(--fg-color);
 					cursor: pointer;
 				}
+
+				.input-text {
+					background-color: inherit;
+				}
 			}
 
 			.reqd::after {