From ac2709608732f99c7a42991498fd940f2f4a8542 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Sat, 20 Jul 2024 11:44:18 +0200
Subject: [PATCH] dont close dialog if clicking outside, also fix warning
 https://w3c.github.io/aria/#aria-hidden

---
 interface/src/project/CustomEntitiesDialog.tsx   | 10 ++++++----
 interface/src/project/CustomizationDialog.tsx    | 12 +++++++-----
 interface/src/project/DevicesDialog.tsx          |  4 ++--
 interface/src/project/SchedulerDialog.tsx        | 16 ++++++++++------
 interface/src/project/SensorsAnalogDialog.tsx    | 10 ++++++----
 .../src/project/SensorsTemperatureDialog.tsx     | 12 +++++++-----
 6 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/interface/src/project/CustomEntitiesDialog.tsx b/interface/src/project/CustomEntitiesDialog.tsx
index 1863ca337..c7831eb7f 100644
--- a/interface/src/project/CustomEntitiesDialog.tsx
+++ b/interface/src/project/CustomEntitiesDialog.tsx
@@ -64,8 +64,10 @@ const CustomEntitiesDialog = ({
     }
   }, [open, selectedItem]);
 
-  const close = () => {
-    onClose();
+  const handleClose = (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
   };
 
   const save = async () => {
@@ -90,7 +92,7 @@ const CustomEntitiesDialog = ({
   };
 
   return (
-    <Dialog sx={dialogStyle} open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
       <DialogTitle>
         {creating ? LL.ADD(1) + ' ' + LL.NEW(1) : LL.EDIT()}&nbsp;{LL.ENTITY()}
       </DialogTitle>
@@ -314,7 +316,7 @@ const CustomEntitiesDialog = ({
         <Button
           startIcon={<CancelIcon />}
           variant="outlined"
-          onClick={close}
+          onClick={onClose}
           color="secondary"
         >
           {LL.CANCEL()}
diff --git a/interface/src/project/CustomizationDialog.tsx b/interface/src/project/CustomizationDialog.tsx
index 6d60ac5ac..6b266b9e5 100644
--- a/interface/src/project/CustomizationDialog.tsx
+++ b/interface/src/project/CustomizationDialog.tsx
@@ -54,8 +54,10 @@ const CustomizationDialog = ({
     }
   }, [open, selectedItem]);
 
-  const close = () => {
-    onClose();
+  const handleClose = (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
   };
 
   const save = () => {
@@ -76,7 +78,7 @@ const CustomizationDialog = ({
   };
 
   return (
-    <Dialog sx={dialogStyle} open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
       <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
       <DialogContent dividers>
         <Grid container direction="row">
@@ -115,7 +117,7 @@ const CustomizationDialog = ({
               name="cn"
               label={LL.NEW_NAME_OF(LL.ENTITY())}
               value={editItem.cn}
-              autoFocus
+              // autoFocus
               sx={{ width: '30ch' }}
               onChange={updateFormValue}
             />
@@ -155,7 +157,7 @@ const CustomizationDialog = ({
         <Button
           startIcon={<CancelIcon />}
           variant="outlined"
-          onClick={close}
+          onClick={onClose}
           color="secondary"
         >
           {LL.CANCEL()}
diff --git a/interface/src/project/DevicesDialog.tsx b/interface/src/project/DevicesDialog.tsx
index d71e5c107..e226897ee 100644
--- a/interface/src/project/DevicesDialog.tsx
+++ b/interface/src/project/DevicesDialog.tsx
@@ -120,7 +120,7 @@ const DevicesDialog = ({
                 label={LL.VALUE(0)}
                 value={editItem.v}
                 disabled={!writeable}
-                autoFocus
+                // autoFocus
                 sx={{ width: '30ch' }}
                 select
                 onChange={updateFormValue}
@@ -162,7 +162,7 @@ const DevicesDialog = ({
                 label={LL.VALUE(0)}
                 value={editItem.v}
                 disabled={!writeable}
-                autoFocus
+                // autoFocus
                 sx={{ width: '30ch' }}
                 multiline={editItem.u ? false : true}
                 onChange={updateFormValue}
diff --git a/interface/src/project/SchedulerDialog.tsx b/interface/src/project/SchedulerDialog.tsx
index b168f7c81..e3aeb72b2 100644
--- a/interface/src/project/SchedulerDialog.tsx
+++ b/interface/src/project/SchedulerDialog.tsx
@@ -62,10 +62,6 @@ const SchedulerDialog = ({
     }
   }, [open, selectedItem]);
 
-  const close = () => {
-    onClose();
-  };
-
   const save = async () => {
     try {
       setFieldErrors(undefined);
@@ -151,8 +147,14 @@ const SchedulerDialog = ({
     </Typography>
   );
 
+  const handleClose = (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
   return (
-    <Dialog sx={dialogStyle} open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
       <DialogTitle>
         {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
         {LL.SCHEDULE(1)}
@@ -294,6 +296,7 @@ const SchedulerDialog = ({
                 <TextField
                   name="time"
                   label={isCondition ? 'Condition' : 'On Change Value'}
+                  multiline
                   fullWidth
                   value={
                     editItem.time == '00:00' ? (editItem.time = '') : editItem.time
@@ -327,6 +330,7 @@ const SchedulerDialog = ({
               fieldErrors={fieldErrors}
               name="cmd"
               label={LL.COMMAND(0)}
+              multiline
               fullWidth
               value={editItem.cmd}
               margin="normal"
@@ -369,7 +373,7 @@ const SchedulerDialog = ({
         <Button
           startIcon={<CancelIcon />}
           variant="outlined"
-          onClick={close}
+          onClick={onClose}
           color="secondary"
         >
           {LL.CANCEL()}
diff --git a/interface/src/project/SensorsAnalogDialog.tsx b/interface/src/project/SensorsAnalogDialog.tsx
index e513335bb..da7655466 100644
--- a/interface/src/project/SensorsAnalogDialog.tsx
+++ b/interface/src/project/SensorsAnalogDialog.tsx
@@ -57,8 +57,10 @@ const SensorsAnalogDialog = ({
     }
   }, [open, selectedItem]);
 
-  const close = () => {
-    onClose();
+  const handleClose = (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
   };
 
   const save = async () => {
@@ -77,7 +79,7 @@ const SensorsAnalogDialog = ({
   };
 
   return (
-    <Dialog sx={dialogStyle} open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
       <DialogTitle>
         {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
         {LL.ANALOG_SENSOR(0)}
@@ -318,7 +320,7 @@ const SensorsAnalogDialog = ({
         <Button
           startIcon={<CancelIcon />}
           variant="outlined"
-          onClick={close}
+          onClick={onClose}
           color="secondary"
         >
           {LL.CANCEL()}
diff --git a/interface/src/project/SensorsTemperatureDialog.tsx b/interface/src/project/SensorsTemperatureDialog.tsx
index b45cf76d0..c5042b80c 100644
--- a/interface/src/project/SensorsTemperatureDialog.tsx
+++ b/interface/src/project/SensorsTemperatureDialog.tsx
@@ -52,8 +52,10 @@ const SensorsTemperatureDialog = ({
     }
   }, [open, selectedItem]);
 
-  const close = () => {
-    onClose();
+  const handleClose = (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
   };
 
   const save = async () => {
@@ -67,7 +69,7 @@ const SensorsTemperatureDialog = ({
   };
 
   return (
-    <Dialog sx={dialogStyle} open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
       <DialogTitle>
         {LL.EDIT()}&nbsp;{LL.TEMP_SENSOR()}
       </DialogTitle>
@@ -84,7 +86,7 @@ const SensorsTemperatureDialog = ({
               name="n"
               label={LL.NAME(0)}
               value={editItem.n}
-              autoFocus
+              // autoFocus
               sx={{ width: '30ch' }}
               onChange={updateFormValue}
             />
@@ -110,7 +112,7 @@ const SensorsTemperatureDialog = ({
         <Button
           startIcon={<CancelIcon />}
           variant="outlined"
-          onClick={close}
+          onClick={onClose}
           color="secondary"
         >
           {LL.CANCEL()}