fix: teleport dropdown outside to handle clipping

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>

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

frappe/public/js/form_builder/components/Dropdown.vue

@@ -91,7 +91,7 @@ onMounted(() => {
 	.search-icon {
 		position: absolute;
 		left: 13px;
-		top: 11px;
+		top: 8px;
 	}
 }
 </style>