From 8564b93dee832729b41ddbe1dd30f1daf1fff449 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Oct 2022 12:55:52 +0530
Subject: [PATCH] fix: scroll if field or section is dragged to top or bottom

---
 frappe/public/js/form_builder/components/FieldTypes.vue | 2 ++
 frappe/public/js/form_builder/components/Section.vue    | 2 ++
 frappe/public/js/form_builder/components/Tabs.vue       | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue
index 7660bf268f..59a1c42d5b 100644
--- a/frappe/public/js/form_builder/components/FieldTypes.vue
+++ b/frappe/public/js/form_builder/components/FieldTypes.vue
@@ -48,6 +48,8 @@ let fields = computed(() => {
 	<SearchBox v-model="search_text" />
 	<draggable
 		class="fields-container"
+		:scroll-sensitivity="100"
+		:force-fallback="true"
 		:list="fields"
 		:group="{ name: 'fields', pull: 'clone', put: false }"
 		:sort="false"
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index 8d4bc59a09..905ec4e4e7 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -64,6 +64,8 @@ let hovered = ref(false);
 						:style="{
 							backgroundColor: column.fields.length ? null : 'var(--gray-50)'
 						}"
+						:scroll-sensitivity="100"
+						:force-fallback="true"
 						v-model="column.fields"
 						group="fields"
 						:animation="150"
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 9a0ef482e1..ee004b726a 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -42,6 +42,8 @@ function activate_tab(tab) {
 			:class="[active_tab == tab.df.name ? 'active' : '']"
 		>
 			<draggable
+				:scroll-sensitivity="100"
+				:force-fallback="true"
 				class="tab-content-container"
 				v-model="tab.sections"
 				group="sections"