From 6a626318bef292a11f17708de6ea53af792fa05d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 01:39:47 +0530
Subject: [PATCH] fix: teleport dropdown outside to handle clipping

---
 frappe/public/js/form_builder/FormBuilder.vue        |  1 +
 .../js/form_builder/components/AddFieldButton.vue    | 12 +++++++-----
 .../public/js/form_builder/components/Dropdown.vue   |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index f18c0f9719..a779097c6a 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -41,6 +41,7 @@ onMounted(() => store.fetch());
 			</div>
 		</div>
 	</div>
+	<div id="drop-down-area" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index 79728a4f0f..fb52a1dcd8 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -8,9 +8,11 @@
 		<slot>
 			{{ __("Add a field") }}
 		</slot>
-		<div class="drop-down" ref="dropdown_ref">
-			<Dropdown v-if="show" :items="fields" v-model="search_text" />
-		</div>
+		<Teleport to="#drop-down-area">
+			<div class="drop-down" ref="dropdown_ref">
+				<Dropdown v-if="show" :items="fields" v-model="search_text" />
+			</div>
+		</Teleport>
 	</button>
 </template>
 
@@ -19,7 +21,7 @@ import Dropdown from "./Dropdown.vue";
 import { useStore } from "../store";
 import { clone_field } from "../utils";
 import { createPopper } from "@popperjs/core";
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 
 const store = useStore();
 
@@ -100,7 +102,7 @@ function setupPopper() {
 function toggle_fieldtype_dropdown() {
 	show.value = !show.value;
 	search_text.value = "";
-	setTimeout(() => setupPopper());
+	nextTick(() => setupPopper());
 }
 
 function add_new_field(field) {
diff --git a/frappe/public/js/form_builder/components/Dropdown.vue b/frappe/public/js/form_builder/components/Dropdown.vue
index 6a5c9347d5..9cf3bd3c64 100644
--- a/frappe/public/js/form_builder/components/Dropdown.vue
+++ b/frappe/public/js/form_builder/components/Dropdown.vue
@@ -91,7 +91,7 @@ onMounted(() => {
 	.search-icon {
 		position: absolute;
 		left: 13px;
-		top: 11px;
+		top: 8px;
 	}
 }
 </style>