From af524948629e6fd175f3e1d08f03e19e2ce70827 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.j.johnson@associates.cisa.dhs.gov>
Date: Mon, 30 Dec 2024 13:13:36 -0500
Subject: [PATCH] Refined User State Selection Form

- Cancel button is diabled if user.invitePending is true.
- Dialog does not close on background click nor escape key press.
- This is to prevent the user from closing the dialog before they have made a selection.
---
 .../Register/UpdateUserStateForm.tsx          | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Register/UpdateUserStateForm.tsx b/frontend/src/components/Register/UpdateUserStateForm.tsx
index 23444a58..e1e0cd3e 100644
--- a/frontend/src/components/Register/UpdateUserStateForm.tsx
+++ b/frontend/src/components/Register/UpdateUserStateForm.tsx
@@ -33,7 +33,7 @@ export const UpdateStateForm: React.FC<{
   const [values, setValues] = useState<UpdateStateFormValues>(defaultValues);
   const [errorRequestMessage, setErrorRequestMessage] = useState<string>('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const { apiPut } = useAuthContext();
+  const { apiPut, user } = useAuthContext();
 
   const handleChange = (event: SelectChangeEvent) => {
     setValues((values: any) => ({
@@ -63,7 +63,16 @@ export const UpdateStateForm: React.FC<{
   };
 
   return (
-    <StyledDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+    <StyledDialog
+      open={open}
+      onClose={(event, reason) => {
+        if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
+          onClose();
+        }
+      }}
+      maxWidth="xs"
+      fullWidth
+    >
       <DialogTitle id="form-dialog-title">Update State Information</DialogTitle>
       <DialogContent>
         {errorRequestMessage && (
@@ -92,7 +101,11 @@ export const UpdateStateForm: React.FC<{
         </Select>
       </DialogContent>
       <DialogActions>
-        <Button variant="outlined" onClick={onClose}>
+        <Button
+          variant="outlined"
+          onClick={onClose}
+          disabled={user?.invitePending === true}
+        >
           Cancel
         </Button>
         <Button