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 (
<>
@@ -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
(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 && (
- 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 && (
+ 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 && (