From 5993e0842c8b2b0587bbf1fcf0e114ccab3f68b0 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 16 Mar 2023 10:55:37 +0530
Subject: [PATCH] Fix: EventType crash when Moving up and down beyond
 boundaries (#7765)

* Make sure that moving up and down doesnt go beyond boundary

* Update packages/features/form-builder/FormBuilder.tsx

Co-authored-by: Alex van Andel <me@alexvanandel.com>

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 .../features/form-builder/FormBuilder.tsx     | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index bf805d4c4d..2a182ce727 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -284,21 +284,25 @@ export const FormBuilder = function FormBuilder({
 
             return (
               <li
-                key={index}
+                key={field.name}
                 data-testid={`field-${field.name}`}
                 className="group relative flex items-center justify-between border-b p-4 last:border-b-0">
-                <button
-                  type="button"
-                  className="invisible absolute -left-[12px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
-                  onClick={() => swap(index, index - 1)}>
-                  <FiArrowUp className="h-5 w-5" />
-                </button>
-                <button
-                  type="button"
-                  className="invisible absolute -left-[12px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
-                  onClick={() => swap(index, index + 1)}>
-                  <FiArrowDown className="h-5 w-5" />
-                </button>
+                {index >= 1 && (
+                  <button
+                    type="button"
+                    className="invisible absolute -left-[12px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                    onClick={() => swap(index, index - 1)}>
+                    <FiArrowUp className="h-5 w-5" />
+                  </button>
+                )}
+                {index < fields.length - 1 && (
+                  <button
+                    type="button"
+                    className="invisible absolute -left-[12px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                    onClick={() => swap(index, index + 1)}>
+                    <FiArrowDown className="h-5 w-5" />
+                  </button>
+                )}
                 <div>
                   <div className="flex flex-col lg:flex-row lg:items-center">
                     <div className="text-sm font-semibold text-gray-700 ltr:mr-1 rtl:ml-1">