fix: cannot focus on disabled input field in firefox

made it readonly

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;

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 -->

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" />

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>
 

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

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;