From 8f9717b401bded50e849c12c38f6c662bdafa970 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Nov 2022 17:34:16 +0530
Subject: [PATCH] fix: cannot select section in read_only state

---
 .../public/js/form_builder/components/Section.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index ee4c45c9a0..b5e53c426c 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -54,8 +54,8 @@ function select_section() {
 	if (!store.read_only) {
 		editing.value = true;
 		nextTick(() => label_input.value.focus());
-		store.selected_field = props.section.df;
 	}
+	store.selected_field = props.section.df;
 }
 </script>
 
@@ -72,7 +72,10 @@ function select_section() {
 			@mouseover.stop="hovered = true"
 			@mouseout.stop="hovered = false"
 		>
-			<div :class="['section-header', section.df.label ? '' : 'hidden']">
+			<div
+				:class="['section-header', section.df.label ? 'has-label' : '']"
+				:hidden="!section.df.label && store.read_only"
+			>
 				<input
 					v-if="editing"
 					ref="label_input"
@@ -157,15 +160,19 @@ function select_section() {
 		}
 
 		&.selected .section-header {
-			display: flex !important;
+			display: flex;
 		}
 
 		.section-header {
-			display: flex;
+			display: none;
 			justify-content: space-between;
 			align-items: center;
 			padding-bottom: 0.75rem;
 
+			&.has-label {
+				display: flex;
+			}
+
 			.input-section-label {
 				border: none;
 				margin-left: -2px;