feat: ensure focus set back to active editor when dialog closed (#344)

src/features/json-editor/index.ts

@@ -1,6 +1,35 @@
+import { getState } from '../../store';
+import { shouldPrioritizeJsonEditor } from '../interface';
+import { IEditorRefs } from './types';
+
 export { EditorPane } from './components/editor-pane';
 export {
     JsonEditorContextProvider,
     useJsonEditorContext
 } from './components/json-editor-context-provider';
 export * from './types';
+
+/**
+ * Ensure that we have the correct ref for an Ace editor, based on the current editor role in the store. This will
+ * allow us to access the editor instance from other components.
+ */
+const getActiveEditorRef = (editorRefs: IEditorRefs) => {
+    const { editorSelectedOperation } = getState();
+    switch (editorSelectedOperation) {
+        case 'Spec':
+            return editorRefs.spec;
+        case 'Config':
+            return editorRefs.config;
+        default:
+            return null;
+    }
+};
+
+/**
+ * Set focus to the active editor, based on the current editor role in the store.
+ */
+export const setFocusToActiveEditor = (editorRefs: IEditorRefs) => {
+    if (shouldPrioritizeJsonEditor()) {
+        getActiveEditorRef(editorRefs)?.current.editor?.focus();
+    }
+};

src/features/modal-dialog/components/modal-dialog.tsx

@@ -21,6 +21,10 @@ import { logRender } from '../../logging';
 import { CreateButton, VisualCreatePane } from '../../visual-create';
 import { closeCreateDialog } from '../../../core/ui/commands';
 import { ExportButtons, VisualExportPane } from '../../visual-export';
+import {
+    setFocusToActiveEditor,
+    useJsonEditorContext
+} from '../../json-editor';
 
 export const ModalDialog: React.FC = () => {
     const { modalDialogRole, clearMigrationDialog, setModalDialogRole } = store(
@@ -31,6 +35,7 @@ export const ModalDialog: React.FC = () => {
         }),
         shallow
     );
+    const editorRefs = useJsonEditorContext();
     const classes = useModalDialogStyles();
     const dialogSurfaceClassName = useMemo(() => {
         switch (modalDialogRole) {
@@ -56,9 +61,11 @@ export const ModalDialog: React.FC = () => {
             closeCreateDialog();
         }
         setModalDialogRole('None');
+        setFocusToActiveEditor(editorRefs);
     };
     const onOpenChange: DialogProps['onOpenChange'] = useCallback(
         (event, data) => {
+            event.stopPropagation();
             if (!data.open) {
                 onClose();
             }