From 5f3c0ff835e9c7598e069125edb1f6ba3e52b3e4 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Tue, 16 May 2023 10:39:52 +0700
Subject: [PATCH] fix(ui/form): expandable form section [EE-4799] (#8866)

---
 .../form-components/FormSection/FormSection.tsx        | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/react/components/form-components/FormSection/FormSection.tsx b/app/react/components/form-components/FormSection/FormSection.tsx
index bd5c12a39..2b7f65016 100644
--- a/app/react/components/form-components/FormSection/FormSection.tsx
+++ b/app/react/components/form-components/FormSection/FormSection.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode, useState } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronUp, ChevronRight } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
 
@@ -24,11 +24,15 @@ export function FormSection({
           <button
             id={`foldingButton${title}`}
             type="button"
-            onClick={() => setIsExpanded(!isExpanded)}
+            onClick={(e) => {
+              setIsExpanded(!isExpanded);
+              e.stopPropagation();
+              e.preventDefault();
+            }}
             className="mx-2 !ml-0 inline-flex w-2 items-center justify-center border-0 bg-transparent"
           >
             <Icon
-              icon={isExpanded ? ChevronDown : ChevronRight}
+              icon={isExpanded ? ChevronUp : ChevronRight}
               className="shrink-0"
             />
           </button>