diff --git a/cypress/integration/form_builder.js b/cypress/integration/form_builder.js
index 43cec97a39..53c45cd379 100644
--- a/cypress/integration/form_builder.js
+++ b/cypress/integration/form_builder.js
@@ -77,7 +77,8 @@ context("Form Builder", () => {
 			.as("input");
 		cy.get("@input").clear({ force: true }).type("Web Form Field", { delay: 200 });
 		cy.wait("@search_link");
-		cy.get("@input").type("{enter}").blur();
+
+		cy.get(first_field).click({ force: true });
 
 		cy.get(first_field)
 			.find(".table-controls .table-column")
diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index 9cb5c8707b..12a8ce79ef 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -10,11 +10,14 @@ let search_text = ref("");
 let args = ref({});
 
 let docfield_df = computed(() => {
-	let fields = store.get_docfields.filter(df => {
+	let fields = store.get_docfields.filter((df) => {
 		if (in_list(frappe.model.layout_fields, df.fieldtype) || df.hidden) {
 			return false;
 		}
-		if (df.depends_on && !evaluate_depends_on_value(df.depends_on, store.form.selected_field)) {
+		if (
+			df.depends_on &&
+			!evaluate_depends_on_value(df.depends_on, store.form.selected_field)
+		) {
 			return false;
 		}
 
diff --git a/frappe/public/js/form_builder/components/controls/CodeControl.vue b/frappe/public/js/form_builder/components/controls/CodeControl.vue
index b0a45a442f..77bbaa3b7e 100644
--- a/frappe/public/js/form_builder/components/controls/CodeControl.vue
+++ b/frappe/public/js/form_builder/components/controls/CodeControl.vue
@@ -7,43 +7,47 @@ let emit = defineEmits(["update:modelValue"]);
 let slots = useSlots();
 
 let code = ref(null);
-let code_control = ref(null);
 let update_control = ref(true);
 
+let code_control = computed(() => {
+	if (!code.value) return;
+	code.value.innerHTML = "";
+
+	return frappe.ui.form.make_control({
+		parent: code.value,
+		df: {
+			...props.df,
+			fieldtype: "Code",
+			hidden: 0,
+			read_only: props.read_only,
+			change: () => {
+				if (update_control.value) {
+					content.value = code_control.value.get_value();
+				}
+				update_control.value = true;
+			},
+		},
+		value: content.value,
+		disabled: Boolean(slots.label) || props.read_only,
+		render_input: true,
+		only_input: Boolean(slots.label),
+	});
+});
+
 let content = computed({
 	get: () => props.modelValue,
-	set: (value) => emit('update:modelValue', value)
+	set: (value) => emit("update:modelValue", value),
 });
 
 onMounted(() => {
-	if (code.value) {
-		code_control.value = frappe.ui.form.make_control({
-			parent: code.value,
-			df: {
-				...props.df,
-				fieldtype: "Code",
-				hidden: 0,
-				read_only: props.read_only,
-				change: () => {
-					if (update_control.value) {
-						content.value = code_control.value.get_value();
-					}
-					update_control.value = true;
-				}
-			},
-			value: content.value,
-			disabled: Boolean(slots.label) || props.read_only,
-			render_input: true,
-			only_input: Boolean(slots.label),
-		});
-	}
+	if (code.value) code_control.value;
 });
 
 watch(
 	() => content.value,
 	(value) => {
 		update_control.value = false;
-		code_control.value.set_value(value);
+		code_control.value?.set_value(value);
 	}
 );
 
@@ -53,7 +57,7 @@ watch(
 		if (code_control.value) {
 			code_control.value.ace_editor_target.css("max-height", value);
 		}
-	},
+	}
 );
 </script>
 
diff --git a/frappe/public/js/form_builder/components/controls/DataControl.vue b/frappe/public/js/form_builder/components/controls/DataControl.vue
index e0d913b0f6..f0fb2d244a 100644
--- a/frappe/public/js/form_builder/components/controls/DataControl.vue
+++ b/frappe/public/js/form_builder/components/controls/DataControl.vue
@@ -48,7 +48,7 @@ if (props.df.fieldtype === "Icon") {
 			class="form-control"
 			type="text"
 			:value="value"
-			:disabled="read_only"
+			:disabled="read_only || df.read_only"
 			@input="event => $emit('update:modelValue', event.target.value)"
 		/>
 		<input
diff --git a/frappe/public/js/form_builder/components/controls/FetchFromControl.vue b/frappe/public/js/form_builder/components/controls/FetchFromControl.vue
index 8efac8e8b0..1368c7e593 100644
--- a/frappe/public/js/form_builder/components/controls/FetchFromControl.vue
+++ b/frappe/public/js/form_builder/components/controls/FetchFromControl.vue
@@ -77,13 +77,20 @@ watch([() => doctype.value, () => fieldname.value], ([doctype_value, fieldname_v
 </script>
 
 <template>
-	<SelectControl :df="doctype_df" :value="doctype" :read_only="read_only" v-model="doctype" />
-	<SelectControl
-		v-if="doctype"
-		:df="field_df"
-		:read_only="read_only"
-		:value="fieldname"
-		v-model="fieldname"
-		:no_label="true"
-	/>
+	<div>
+		<SelectControl
+			:df="doctype_df"
+			:value="doctype"
+			:read_only="read_only"
+			v-model="doctype"
+		/>
+		<SelectControl
+			v-if="doctype"
+			:df="field_df"
+			:read_only="read_only"
+			:value="fieldname"
+			v-model="fieldname"
+			:no_label="true"
+		/>
+	</div>
 </template>
diff --git a/frappe/public/js/form_builder/components/controls/GeolocationControl.vue b/frappe/public/js/form_builder/components/controls/GeolocationControl.vue
index 8acc005fad..032234bdba 100644
--- a/frappe/public/js/form_builder/components/controls/GeolocationControl.vue
+++ b/frappe/public/js/form_builder/components/controls/GeolocationControl.vue
@@ -1,21 +1,24 @@
 <script setup>
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 const props = defineProps(["df"]);
 
 let map = ref(null);
-let map_control = ref(null);
+let map_control = computed(() => {
+	if (!map.value) return;
+	map.value.innerHTML = "";
+
+	return frappe.ui.form.make_control({
+		parent: map.value,
+		df: { ...props.df, hidden: 0 },
+		frm: true,
+		disabled: true,
+		render_input: true,
+	});
+});
 
 onMounted(() => {
-	if (map.value) {
-		map_control.value = frappe.ui.form.make_control({
-			parent: map.value,
-			df: { ...props.df, hidden: 0 },
-			frm: true,
-			disabled: true,
-			render_input: true,
-		});
-	}
+	if (map.value) map_control.value;
 });
 </script>
 
diff --git a/frappe/public/js/form_builder/components/controls/LinkControl.vue b/frappe/public/js/form_builder/components/controls/LinkControl.vue
index 09ed47dc5a..7b791cf979 100644
--- a/frappe/public/js/form_builder/components/controls/LinkControl.vue
+++ b/frappe/public/js/form_builder/components/controls/LinkControl.vue
@@ -7,12 +7,34 @@ let emit = defineEmits(["update:modelValue"]);
 let slots = useSlots();
 
 let link = ref(null);
-let link_control = ref(null);
 let update_control = ref(true);
 
+let link_control = computed(() => {
+	if (!link.value) return;
+	link.value.innerHTML = "";
+
+	return frappe.ui.form.make_control({
+		parent: link.value,
+		df: {
+			...props.df,
+			hidden: 0,
+			read_only: Boolean(slots.label) || props.read_only,
+			change: () => {
+				if (update_control.value) {
+					content.value = link_control.value.get_value();
+				}
+				update_control.value = true;
+			},
+		},
+		value: content.value,
+		render_input: true,
+		only_input: Boolean(slots.label),
+	});
+});
+
 let content = computed({
 	get: () => props.modelValue,
-	set: value => emit("update:modelValue", value)
+	set: (value) => emit("update:modelValue", value),
 });
 
 onMounted(() => {
@@ -27,36 +49,20 @@ onMounted(() => {
 			}
 		} else {
 			// reset filters
-			if (props.df.filters && 'istable' in props.df.filters) {
+			if (props.df.filters && "istable" in props.df.filters) {
 				delete props.df.filters.istable;
 			}
 		}
 
-		link_control.value = frappe.ui.form.make_control({
-			parent: link.value,
-			df: {
-				...props.df,
-				hidden: 0,
-				read_only: Boolean(slots.label) || props.read_only,
-				change: () => {
-					if (update_control.value) {
-						content.value = link_control.value.get_value();
-					}
-					update_control.value = true;
-				}
-			},
-			value: content.value,
-			render_input: true,
-			only_input: Boolean(slots.label)
-		});
+		link_control.value;
 	}
 });
 
 watch(
 	() => content.value,
-	value => {
+	(value) => {
 		update_control.value = false;
-		link_control.value.set_value(value);
+		link_control.value?.set_value(value);
 	}
 );
 </script>
@@ -81,4 +87,4 @@ watch(
 		<div v-if="df.description" class="mt-2 description" v-html="df.description" />
 	</div>
 	<div v-else ref="link"></div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frappe/public/js/form_builder/components/controls/RatingControl.vue b/frappe/public/js/form_builder/components/controls/RatingControl.vue
index 4356dc0b2d..fc9fd8be8f 100644
--- a/frappe/public/js/form_builder/components/controls/RatingControl.vue
+++ b/frappe/public/js/form_builder/components/controls/RatingControl.vue
@@ -1,21 +1,24 @@
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 const props = defineProps(["df"]);
 
 let rating = ref(null);
-let rating_control = ref(null);
+let rating_control = computed(() => {
+	if (!rating.value) return;
+	rating.value.innerHTML = "";
+
+	return frappe.ui.form.make_control({
+		parent: rating.value,
+		df: { ...props.df, hidden: 0 },
+		disabled: true,
+		render_input: true,
+		only_input: true,
+	});
+});
 
 onMounted(() => {
-	if (rating.value) {
-		rating_control.value = frappe.ui.form.make_control({
-			parent: rating.value,
-			df: { ...props.df, hidden: 0 },
-			disabled: true,
-			render_input: true,
-			only_input: true,
-		});
-	}
+	if (rating.value) rating_control.value;
 });
 
 watch(
@@ -23,9 +26,9 @@ watch(
 	(value) => {
 		if (rating_control.value) {
 			rating_control.value.df.options = value;
-			rating_control.value.make_input();
+			rating_control.value?.make_input();
 		}
-	},
+	}
 );
 </script>
 
@@ -44,5 +47,4 @@ watch(
 :deep(.rating) {
 	--star-fill: var(--yellow-300) !important;
 }
-
 </style>
diff --git a/frappe/public/js/form_builder/components/controls/TextEditorControl.vue b/frappe/public/js/form_builder/components/controls/TextEditorControl.vue
index 6a3aa21046..2e302b3a8b 100644
--- a/frappe/public/js/form_builder/components/controls/TextEditorControl.vue
+++ b/frappe/public/js/form_builder/components/controls/TextEditorControl.vue
@@ -1,21 +1,24 @@
 <script setup>
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 const props = defineProps(["df"]);
 
 let quill = ref(null);
-let quill_control = ref(null);
+let quill_control = computed(() => {
+	if (!quill.value) return;
+	quill.value.innerHTML = "";
+
+	return frappe.ui.form.make_control({
+		parent: quill.value,
+		df: { ...props.df, hidden: 0 },
+		disabled: true,
+		render_input: true,
+		only_input: true,
+	});
+});
 
 onMounted(() => {
-	if (quill.value) {
-		quill_control.value = frappe.ui.form.make_control({
-			parent: quill.value,
-			df: { ...props.df, hidden: 0 },
-			disabled: true,
-			render_input: true,
-			only_input: true,
-		});
-	}
+	if (quill.value) quill_control.value;
 });
 </script>
 
diff --git a/frappe/public/js/frappe/form/controls/select.js b/frappe/public/js/frappe/form/controls/select.js
index de96cd902c..53e7f35125 100644
--- a/frappe/public/js/frappe/form/controls/select.js
+++ b/frappe/public/js/frappe/form/controls/select.js
@@ -161,7 +161,7 @@ function parse_option(v) {
 		is_disabled = Boolean(v.disabled);
 		is_selected = Boolean(v.selected);
 
-		if (is_value_null && is_label_null) {
+		if (is_value_null && is_label_null && typeof v === "string") {
 			value = v;
 			label = __(v);
 		} else {