From c960a48b4ff4ff806e33c2ca622d106c3915e7b8 Mon Sep 17 00:00:00 2001
From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com>
Date: Tue, 17 Dec 2024 06:09:58 +0000
Subject: [PATCH] fix: z-index of field settings (#1469)

---
 .../primitives/document-flow/add-fields.tsx   |  4 +++
 .../primitives/document-flow/field-item.tsx   | 29 +++++++++++++------
 .../template-flow/add-template-fields.tsx     |  4 +++
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index afa80b14a..4300a95a3 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -129,6 +129,7 @@ export const AddFieldsFormPartial = ({
     currentStep === 1 && typeof documentFlow.onBackStep === 'function' && canGoBack;
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
   const [currentField, setCurrentField] = useState<FieldFormType>();
+  const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
 
   const form = useForm<TAddFieldsFormSchema>({
     defaultValues: {
@@ -652,6 +653,9 @@ export const AddFieldsFormPartial = ({
                       }}
                       hideRecipients={hideRecipients}
                       hasErrors={!!hasFieldError}
+                      active={activeFieldId === field.formId}
+                      onFieldActivate={() => setActiveFieldId(field.formId)}
+                      onFieldDeactivate={() => setActiveFieldId(null)}
                     />
                   );
                 })}
diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx
index d77e55047..7d3a1c33c 100644
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -47,6 +47,9 @@ export type FieldItemProps = {
   recipientIndex?: number;
   hideRecipients?: boolean;
   hasErrors?: boolean;
+  active?: boolean;
+  onFieldActivate?: () => void;
+  onFieldDeactivate?: () => void;
 };
 
 export const FieldItem = ({
@@ -67,8 +70,10 @@ export const FieldItem = ({
   recipientIndex = 0,
   hideRecipients = false,
   hasErrors,
+  active,
+  onFieldActivate,
+  onFieldDeactivate,
 }: FieldItemProps) => {
-  const [active, setActive] = useState(false);
   const [coords, setCoords] = useState({
     pageX: 0,
     pageY: 0,
@@ -150,6 +155,8 @@ export const FieldItem = ({
       });
 
       if (isOutsideOfField) {
+        setSettingsActive(false);
+        onFieldDeactivate?.();
         onBlur?.();
       }
     };
@@ -188,10 +195,12 @@ export const FieldItem = ({
   return createPortal(
     <Rnd
       key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
-      className={cn('group z-20', {
+      className={cn('group', {
         'pointer-events-none': passive,
         'pointer-events-none cursor-not-allowed opacity-75': disabled,
-        'z-10': !active || disabled,
+        'z-50': active && !disabled,
+        'z-20': !active && !disabled,
+        'z-10': disabled,
       })}
       minHeight={fixedSize ? '' : minHeight || 'auto'}
       minWidth={fixedSize ? '' : minWidth || 'auto'}
@@ -202,15 +211,15 @@ export const FieldItem = ({
         width: fixedSize ? '' : coords.pageWidth,
       }}
       bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
-      onDragStart={() => setActive(true)}
-      onResizeStart={() => setActive(true)}
+      onDragStart={() => onFieldActivate?.()}
+      onResizeStart={() => onFieldActivate?.()}
       enableResizing={!fixedSize}
       onResizeStop={(_e, _d, ref) => {
-        setActive(false);
+        onFieldDeactivate?.();
         onResize?.(ref);
       }}
       onDragStop={(_e, d) => {
-        setActive(false);
+        onFieldDeactivate?.();
         onMove?.(d.node);
       }}
     >
@@ -226,8 +235,10 @@ export const FieldItem = ({
           !fixedSize && '[container-type:size]',
         )}
         data-error={hasErrors ? 'true' : undefined}
-        onClick={() => {
+        onClick={(e) => {
+          e.stopPropagation();
           setSettingsActive((prev) => !prev);
+          onFieldActivate?.();
           onFocus?.();
         }}
         ref={$el}
@@ -264,7 +275,7 @@ export const FieldItem = ({
       </div>
 
       {!disabled && settingsActive && (
-        <div className="mt-1 flex justify-center">
+        <div className="z-[60] mt-1 flex justify-center">
           <div className="dark:bg-background group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
             {advancedField && (
               <button
diff --git a/packages/ui/primitives/template-flow/add-template-fields.tsx b/packages/ui/primitives/template-flow/add-template-fields.tsx
index 97e76f499..225621e89 100644
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@@ -100,6 +100,7 @@ export const AddTemplateFieldsFormPartial = ({
   const { currentStep, totalSteps, previousStep } = useStep();
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
   const [currentField, setCurrentField] = useState<FieldFormType>();
+  const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
 
   const form = useForm<TAddTemplateFieldsFormSchema>({
     defaultValues: {
@@ -475,6 +476,9 @@ export const AddTemplateFieldsFormPartial = ({
                       handleAdvancedSettings();
                     }}
                     hideRecipients={hideRecipients}
+                    active={activeFieldId === field.formId}
+                    onFieldActivate={() => setActiveFieldId(field.formId)}
+                    onFieldDeactivate={() => setActiveFieldId(null)}
                   />
                 );
               })}