From 6f7cbcc1e6ad3315b7ae3f6c0c1a7fda53f732bb Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Fri, 26 Jun 2026 14:26:43 +1000
Subject: [PATCH] fix: stuff

---
 .../envelope-editor-fields-drag-drop.tsx      | 14 +----
 .../envelope-editor-fields-page-renderer.tsx  | 58 ++++++++++++-------
 .../envelope-fields.spec.ts                   |  1 +
 3 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
index a6ae5c317..2c2c4516d 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
@@ -237,16 +237,6 @@ export const EnvelopeEditorFieldDragDrop = ({
     [selectedRecipientId, getRecipientColorKey],
   );
 
-  /**
-   * Begin placing a field type. Also clears the current field selection so the
-   * previously placed field's action toolbar can't intercept the next placement
-   * click on the canvas (the renderer mirrors this onto the canvas selection).
-   */
-  const handleStartPlacingField = (type: FieldType) => {
-    setSelectedField(type);
-    editorFields.setSelectedField(null);
-  };
-
   return (
     <>
       <div className="grid grid-cols-2 gap-x-2 gap-y-2.5">
@@ -255,8 +245,8 @@ export const EnvelopeEditorFieldDragDrop = ({
             disabled={isFieldsDisabled}
             key={field.type}
             type="button"
-            onClick={() => handleStartPlacingField(field.type)}
-            onMouseDown={() => handleStartPlacingField(field.type)}
+            onClick={() => setSelectedField(field.type)}
+            onMouseDown={() => setSelectedField(field.type)}
             data-selected={selectedField === field.type ? true : undefined}
             className={cn(
               'group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-border px-4 transition-colors',
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
index 23d97ca8d..5cbd4addf 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx
@@ -49,6 +49,13 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
   const [isFieldChanging, setIsFieldChanging] = useState(false);
   const [pendingFieldCreation, setPendingFieldCreation] = useState<Konva.Rect | null>(null);
 
+  /**
+   * Whether the field was automatically selected on creation (drag-drop or marquee).
+   *
+   * We purposefully supress the floating toolbar for newly created fields.
+   */
+  const [isAutoSelectedField, setIsAutoSelectedField] = useState(false);
+
   const { stage, pageLayer, konvaContainer, scaledViewport, unscaledViewport } = usePageRenderer(
     ({ stage, pageLayer }) => createPageCanvas(stage, pageLayer),
     pageData,
@@ -539,7 +546,7 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
         const fieldGroupToSelect = pageLayer.current.findOne(`#${selectedFormId}`);
 
         if (fieldGroupToSelect instanceof Konva.Group) {
-          setSelectedFields([fieldGroupToSelect]);
+          setSelectedFields([fieldGroupToSelect], { isAutoSelect: true });
         }
       }
     } else if (selectedFormId === null && isSingleCanvasSelection) {
@@ -558,7 +565,11 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
     editorFields.selectedField?.formId,
   ]);
 
-  const setSelectedFields = (nodes: Konva.Node[]) => {
+  const setSelectedFields = (nodes: Konva.Node[], options?: { isAutoSelect?: boolean }) => {
+    // Any explicit (user-driven) selection shows the action toolbar; only auto-selection
+    // on field creation suppresses it.
+    setIsAutoSelectedField(Boolean(options?.isAutoSelect));
+
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const fieldGroups = nodes.filter(
       (node) => node.hasName('field-group') && Boolean(node.getStage()) && Boolean(node.getParent()),
@@ -694,25 +705,30 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
 
   return (
     <>
-      {selectedKonvaFieldGroups.length > 0 && interactiveTransformer.current && !isFieldChanging && (
-        <FieldActionButtons
-          handleDuplicateSelectedFields={duplicatedSelectedFields}
-          handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
-          handleDeleteSelectedFields={deletedSelectedFields}
-          handleChangeRecipient={changeSelectedFieldsRecipients}
-          handleChangeFieldType={changeSelectedFieldsType}
-          selectedFieldFormId={selectedKonvaFieldGroups.map((field) => field.id())}
-          style={{
-            position: 'absolute',
-            top: interactiveTransformer.current.y() + interactiveTransformer.current.getClientRect().height + 5 + 'px',
-            left: interactiveTransformer.current.x() + interactiveTransformer.current.getClientRect().width / 2 + 'px',
-            transform: 'translateX(-50%)',
-            gap: '8px',
-            pointerEvents: 'auto',
-            zIndex: 50,
-          }}
-        />
-      )}
+      {selectedKonvaFieldGroups.length > 0 &&
+        interactiveTransformer.current &&
+        !isFieldChanging &&
+        !isAutoSelectedField && (
+          <FieldActionButtons
+            handleDuplicateSelectedFields={duplicatedSelectedFields}
+            handleDuplicateSelectedFieldsOnAllPages={duplicatedSelectedFieldsOnAllPages}
+            handleDeleteSelectedFields={deletedSelectedFields}
+            handleChangeRecipient={changeSelectedFieldsRecipients}
+            handleChangeFieldType={changeSelectedFieldsType}
+            selectedFieldFormId={selectedKonvaFieldGroups.map((field) => field.id())}
+            style={{
+              position: 'absolute',
+              top:
+                interactiveTransformer.current.y() + interactiveTransformer.current.getClientRect().height + 5 + 'px',
+              left:
+                interactiveTransformer.current.x() + interactiveTransformer.current.getClientRect().width / 2 + 'px',
+              transform: 'translateX(-50%)',
+              gap: '8px',
+              pointerEvents: 'auto',
+              zIndex: 50,
+            }}
+          />
+        )}
 
       {pendingFieldCreation && (
         <div
diff --git a/packages/app-tests/e2e/envelope-editor-v2/envelope-fields.spec.ts b/packages/app-tests/e2e/envelope-editor-v2/envelope-fields.spec.ts
index b4130a358..f9c3515d4 100644
--- a/packages/app-tests/e2e/envelope-editor-v2/envelope-fields.spec.ts
+++ b/packages/app-tests/e2e/envelope-editor-v2/envelope-fields.spec.ts
@@ -46,6 +46,7 @@ const updateExternalId = async (surface: TEnvelopeEditorSurface, externalId: str
 
   if (!surface.isEmbedded) {
     await expectToastTextToBeVisible(surface.root, 'Envelope updated');
+    await surface.root.getByTestId('toast-close').click();
   }
 };