From e9ac718199d3b7f334769d8304d58ca650bd81c5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 12 Jan 2023 21:25:39 +0530
Subject: [PATCH] fix: cannot focus on disabled input field in firefox

made it readonly
---
 frappe/public/js/form_builder/components/Field.vue            | 4 ++++
 .../js/form_builder/components/controls/DataControl.vue       | 4 ++--
 .../js/form_builder/components/controls/LinkControl.vue       | 2 +-
 .../js/form_builder/components/controls/SelectControl.vue     | 2 +-
 .../js/form_builder/components/controls/TextControl.vue       | 2 +-
 .../js/form_builder/components/controls/TextEditorControl.vue | 4 ++++
 6 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 4f6ed50020..5a7ce5626f 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -127,6 +127,10 @@ function duplicate_field() {
 		}
 	}
 
+	:deep(.form-control:read-only:focus) {
+		box-shadow: none;
+	}
+
 	:deep(.field-controls) {
 		display: flex;
 		justify-content: space-between;
diff --git a/frappe/public/js/form_builder/components/controls/DataControl.vue b/frappe/public/js/form_builder/components/controls/DataControl.vue
index aec72925a5..2052912130 100644
--- a/frappe/public/js/form_builder/components/controls/DataControl.vue
+++ b/frappe/public/js/form_builder/components/controls/DataControl.vue
@@ -43,7 +43,7 @@ if (props.df.fieldtype === "Icon") {
 			type="text"
 			:style="{ height: df.fieldtype == 'Table MultiSelect' ? '42px' : '' }"
 			:placeholder="placeholder"
-			disabled
+			readonly
 		/>
 		<input
 			v-else
@@ -58,7 +58,7 @@ if (props.df.fieldtype === "Icon") {
 			class="mt-2 form-control"
 			type="text"
 			:style="{ height: '110px' }"
-			disabled
+			readonly
 		/>
 
 		<!-- description -->
diff --git a/frappe/public/js/form_builder/components/controls/LinkControl.vue b/frappe/public/js/form_builder/components/controls/LinkControl.vue
index 1779f45d6f..ce58c9a81e 100644
--- a/frappe/public/js/form_builder/components/controls/LinkControl.vue
+++ b/frappe/public/js/form_builder/components/controls/LinkControl.vue
@@ -77,7 +77,7 @@ watch(
 		</div>
 
 		<!-- link input -->
-		<input class="form-control" type="text" disabled />
+		<input class="form-control" type="text" readonly />
 
 		<!-- description -->
 		<div v-if="df.description" class="mt-2 description" v-html="df.description" />
diff --git a/frappe/public/js/form_builder/components/controls/SelectControl.vue b/frappe/public/js/form_builder/components/controls/SelectControl.vue
index fb2821eb3b..091430a6fe 100644
--- a/frappe/public/js/form_builder/components/controls/SelectControl.vue
+++ b/frappe/public/js/form_builder/components/controls/SelectControl.vue
@@ -94,7 +94,7 @@ watch(() => props.df.options, () => {
 
 		<!-- select input -->
 		<div class="select-input">
-			<input class="form-control" disabled />
+			<input class="form-control" readonly />
 			<div class="select-icon" v-html="frappe.utils.icon('select', 'sm')"></div>
 		</div>
 
diff --git a/frappe/public/js/form_builder/components/controls/TextControl.vue b/frappe/public/js/form_builder/components/controls/TextControl.vue
index 5fc503f0dd..8c49834ccf 100644
--- a/frappe/public/js/form_builder/components/controls/TextControl.vue
+++ b/frappe/public/js/form_builder/components/controls/TextControl.vue
@@ -113,7 +113,7 @@ watch([() => doctype.value, () => fieldname.value], ([doctype_value, fieldname_v
 			:style="{ height: height, maxHeight: df.max_height ?? '' }"
 			class="form-control"
 			type="text"
-			disabled
+			readonly
 		/>
 		<textarea
 			v-else
diff --git a/frappe/public/js/form_builder/components/controls/TextEditorControl.vue b/frappe/public/js/form_builder/components/controls/TextEditorControl.vue
index b9ff8dee44..a47a444836 100644
--- a/frappe/public/js/form_builder/components/controls/TextEditorControl.vue
+++ b/frappe/public/js/form_builder/components/controls/TextEditorControl.vue
@@ -34,6 +34,10 @@ onMounted(() => {
 :deep(.quill) {
 	.ql-toolbar {
 		pointer-events: none;
+
+		.ql-formats {
+			margin-right: 12px;
+		}
 	}
 	.ql-container p {
 		cursor: pointer;