Fix code editor losing text on changing browser tab

resources/js/pages/application/components/deployment-script.tsx

@@ -14,6 +14,7 @@ import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { StatusRipple } from '@/components/status-ripple';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function DeploymentScript({
   site,
@@ -27,6 +28,7 @@ export default function DeploymentScript({
   children: ReactNode;
 }) {
   const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
 
   const [open, setOpen] = useState(false);
   const form = useForm<{
@@ -37,19 +39,24 @@ export default function DeploymentScript({
     restart_workers: script.configs.restart_workers,
   });
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.put(route('application.update-deployment-script', { server: site.server_id, site: site.id, deploymentScript: script.id }), {
       onSuccess: () => {
-        setOpen(false);
+        handleOpenChange(false);
       },
     });
   };
 
   registerBashLanguage(useMonaco());
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>{children}</SheetTrigger>
       <SheetContent className="sm:max-w-5xl">
         <SheetHeader>

resources/js/pages/application/components/env.tsx

@@ -12,9 +12,11 @@ import { registerDotEnvLanguage } from '@/lib/editor';
 import { Site } from '@/types/site';
 import { useAppearance } from '@/hooks/use-appearance';
 import { Input } from '@/components/ui/input';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function Env({ site, children }: { site: Site; children: ReactNode }) {
   const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
   const [open, setOpen] = useState(false);
   const form = useForm<{
     env: string;
@@ -24,11 +26,16 @@ export default function Env({ site, children }: { site: Site; children: ReactNod
     path: site.type_data.env_path || `${site.path}/.env`,
   });
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.put(route('application.update-env', { server: site.server_id, site: site.id }), {
       onSuccess: () => {
-        setOpen(false);
+        handleOpenChange(false);
       },
     });
   };
@@ -50,12 +57,13 @@ export default function Env({ site, children }: { site: Site; children: ReactNod
     },
     retry: false,
     enabled: open,
+    refetchOnWindowFocus: false,
   });
 
   registerDotEnvLanguage(useMonaco());
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>{children}</SheetTrigger>
       <SheetContent className="sm:max-w-5xl">
         <SheetHeader>

resources/js/pages/php/components/ini.tsx

@@ -12,9 +12,11 @@ import { Button } from '@/components/ui/button';
 import { LoaderCircleIcon } from 'lucide-react';
 import { registerIniLanguage } from '@/lib/editor';
 import { useAppearance } from '@/hooks/use-appearance';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function PHPIni({ service, type }: { service: Service; type: 'fpm' | 'cli' }) {
   const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
   const [open, setOpen] = useState(false);
   const form = useForm<{
     ini: string;
@@ -26,11 +28,16 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
     version: service.version,
   });
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.patch(route('php.ini.update', { server: service.server_id, service: service.id }), {
       onSuccess: () => {
-        setOpen(false);
+        handleOpenChange(false);
       },
     });
   };
@@ -53,12 +60,13 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
     },
     retry: false,
     enabled: open,
+    refetchOnWindowFocus: false,
   });
 
   registerIniLanguage(useMonaco());
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>
         <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit {type} ini</DropdownMenuItem>
       </SheetTrigger>

resources/js/pages/scripts/components/form.tsx

@@ -11,9 +11,11 @@ import { registerBashLanguage } from '@/lib/editor';
 import { Editor, useMonaco } from '@monaco-editor/react';
 import { useAppearance } from '@/hooks/use-appearance';
 import { Script } from '@/types/script';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function ScriptForm({ script, children }: { script?: Script; children: ReactNode }) {
   const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
 
   const [open, setOpen] = useState(false);
 
@@ -25,28 +27,33 @@ export default function ScriptForm({ script, children }: { script?: Script; chil
     content: script?.content ?? '',
   });
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     if (script) {
       form.put(route('scripts.update', { script: script.id }), {
         onSuccess: () => {
-          setOpen(false);
+          handleOpenChange(false);
         },
       });
       return;
     }
 
     form.post(route('scripts'), {
       onSuccess: () => {
-        setOpen(false);
+        handleOpenChange(false);
       },
     });
   };
 
   registerBashLanguage(useMonaco());
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>{children}</SheetTrigger>
       <SheetContent className="sm:max-w-5xl">
         <SheetHeader>

resources/js/pages/services/components/config-file.tsx

@@ -11,9 +11,11 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { LoaderCircleIcon } from 'lucide-react';
 import { useAppearance } from '@/hooks/use-appearance';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function ConfigFile({ service, configPath }: { service: Service; configPath: ConfigPath }) {
   const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
   const [open, setOpen] = useState(false);
   const form = useForm<{
     content: string;
@@ -23,11 +25,16 @@ export default function ConfigFile({ service, configPath }: { service: Service;
     config_name: configPath.name,
   });
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.patch(route('services.config.update', { server: service.server_id, service: service.id }), {
       onSuccess: () => {
-        setOpen(false);
+        handleOpenChange(false);
       },
     });
   };
@@ -49,10 +56,11 @@ export default function ConfigFile({ service, configPath }: { service: Service;
     },
     retry: false,
     enabled: open,
+    refetchOnWindowFocus: false,
   });
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>
         <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit {configPath.name}</DropdownMenuItem>
       </SheetTrigger>

resources/js/pages/site-settings/components/vhost.tsx

@@ -13,21 +13,28 @@ import { useAppearance } from '@/hooks/use-appearance';
 import { Site } from '@/types/site';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { StatusRipple } from '@/components/status-ripple';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function VHost({ site, children }: { site: Site; children: ReactNode }) {
   const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
   const [open, setOpen] = useState(false);
   const form = useForm<{
     vhost: string;
   }>({
     vhost: '',
   });
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.put(route('site-settings.update-vhost', { server: site.server_id, site: site.id }), {
       onSuccess: () => {
-        setOpen(false);
+        handleOpenChange(false);
       },
     });
   };
@@ -48,14 +55,15 @@ export default function VHost({ site, children }: { site: Site; children: ReactN
     },
     retry: false,
     enabled: open,
+    refetchOnWindowFocus: false,
   });
 
   const monaco = useMonaco();
   registerNginxLanguage(monaco);
   registerCaddyLanguage(monaco);
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>{children}</SheetTrigger>
       <SheetContent className="sm:max-w-5xl">
         <SheetHeader>

resources/js/pages/workflows/components/action-form.tsx

@@ -10,6 +10,7 @@ import { useAppearance } from '@/hooks/use-appearance';
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { toast } from 'sonner';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function ActionForm({
   action,
@@ -24,13 +25,19 @@ export default function ActionForm({
   type: 'add' | 'edit';
   children: ReactNode;
 }) {
+  const setFocused = useInputFocus((state) => state.setFocused);
   const [open, setOpen] = useState(false);
   const form = useForm({
     label: action.label,
     inputs: JSON.stringify(Array.isArray(action.inputs) && action.inputs.length === 0 ? {} : action.inputs || {}, null, 2),
   });
   const { getActualAppearance } = useAppearance();
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     reformatJson();
@@ -41,7 +48,7 @@ export default function ActionForm({
     const parsedInputs = JSON.parse(form.data.inputs || '{}');
     newAction.inputs = Array.isArray(parsedInputs) && parsedInputs.length === 0 ? {} : parsedInputs;
     onActionChanged({ ...newAction });
-    setOpen(false);
+    handleOpenChange(false);
   };
 
   const reformatJson = () => {
@@ -57,7 +64,7 @@ export default function ActionForm({
   };
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>{children}</SheetTrigger>
       <SheetContent className="sm:max-w-5xl">
         <SheetHeader>

resources/js/pages/workflows/components/run.tsx

@@ -19,8 +19,10 @@ import { Editor } from '@monaco-editor/react';
 import { LoaderCircleIcon } from 'lucide-react';
 import { ReactNode, useState } from 'react';
 import { toast } from 'sonner';
+import { useInputFocus } from '@/stores/useInputFocus';
 
 export default function Run({ workflow, children }: { workflow: Workflow; children: ReactNode }) {
+  const setFocused = useInputFocus((state) => state.setFocused);
   const [open, setOpen] = useState(false);
 
   const form = useForm<{
@@ -32,6 +34,11 @@ export default function Run({ workflow, children }: { workflow: Workflow; childr
   });
   const { getActualAppearance } = useAppearance();
 
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    setFocused(isOpen);
+  };
+
   const submit = () => {
     validateInputs();
     form.post(route('workflow-runs.store', { workflow: workflow.id }));
@@ -48,7 +55,7 @@ export default function Run({ workflow, children }: { workflow: Workflow; childr
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="sm:max-w-4xl">
         <DialogHeader>