2447 client - Fix Monaco editor keyboard input in Upload Sample Output dialog

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ivicac

client/src/pages/platform/workflow-editor/components/node-details-tabs/output-tab/OutputTabSampleDataDialog.tsx

@@ -80,8 +80,11 @@ const OutputTabSampleDataDialog = ({onClose, onUpload, open, placeholder}: Outpu
     }, [placeholder]);
 
     return (
-        <Dialog onOpenChange={handleOpenChange} open={open}>
-            <DialogContent className="max-w-output-tab-sample-data-dialog-width">
+        <Dialog modal={false} onOpenChange={handleOpenChange} open={open}>
+            <DialogContent
+                className="max-w-output-tab-sample-data-dialog-width"
+                onInteractOutside={(event) => event.preventDefault()}
+            >
                 <DialogHeader className="flex flex-row items-center justify-between space-y-0">
                     <div className="flex flex-col space-y-1">
                         <DialogTitle>Upload Sample Output Data</DialogTitle>

client/src/pages/platform/workflow-editor/components/properties/components/property-json-schema-builder/PropertyJsonSchemaBuilderSampleDataDialog.tsx

@@ -13,7 +13,7 @@ import {
 import MonacoEditorLoader from '@/shared/components/MonacoEditorLoader';
 import {EDITOR_PLACEHOLDER, SPACE} from '@/shared/constants';
 import {getCookie} from '@/shared/util/cookie-utils';
-import {Suspense, lazy, useState} from 'react';
+import {Suspense, lazy, useRef, useState} from 'react';
 
 import type {StandaloneCodeEditorType} from '@/shared/components/MonacoTypes';
 
@@ -34,6 +34,8 @@ const PropertyJsonSchemaBuilderSampleDataDialog = ({onChange}: {onChange?: (newS
     const [curSchema, setCurSchema] = useState<SchemaRecordType | undefined>();
     const [open, setOpen] = useState<boolean>(true);
 
+    const editorRef = useRef<StandaloneCodeEditorType | null>(null);
+
     const handleEditorOnChange = (value: string | undefined) => {
         const placeholder = document.querySelector('#monaco-placeholder') as HTMLElement | null;
 
@@ -72,6 +74,8 @@ const PropertyJsonSchemaBuilderSampleDataDialog = ({onChange}: {onChange?: (newS
     };
 
     const handleEditorOnMount = (editor: StandaloneCodeEditorType) => {
+        editorRef.current = editor;
+
         const placeholder = document.querySelector('#monaco-placeholder') as HTMLElement | null;
 
         if (!placeholder) {
@@ -80,7 +84,7 @@ const PropertyJsonSchemaBuilderSampleDataDialog = ({onChange}: {onChange?: (newS
 
         placeholder.style.display = curSchema ? 'none' : 'block';
 
-        editor.focus();
+        setTimeout(() => editor.focus(), 0);
     };
 
     const handleOpenChange = (open: boolean) => {
@@ -97,7 +101,16 @@ const PropertyJsonSchemaBuilderSampleDataDialog = ({onChange}: {onChange?: (newS
                 <Button label="Generate" variant="outline" />
             </DialogTrigger>
 
-            <DialogContent className="max-w-output-tab-sample-data-dialog-width">
+            <DialogContent
+                className="max-w-output-tab-sample-data-dialog-width"
+                onFocusOutside={(event) => event.preventDefault()}
+                onOpenAutoFocus={(event) => {
+                    event.preventDefault();
+
+                    setTimeout(() => editorRef.current?.focus(), 0);
+                }}
+                onPointerDownOutside={(event) => event.preventDefault()}
+            >
                 <DialogHeader className="flex flex-row items-center justify-between space-y-0">
                     <div className="flex flex-col space-y-1">
                         <DialogTitle>Sample JSON</DialogTitle>