From 70a962714a1c7d8cefa41caee690487c5c618649 Mon Sep 17 00:00:00 2001
From: Russell Vinegar <russell.vinegar@gov.bc.ca>
Date: Thu, 12 Sep 2024 11:09:06 -0700
Subject: [PATCH] reset edit display name input on cancel

---
 .../edit-display-name/edit-display-name.tsx      | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/nextapp/components/edit-display-name/edit-display-name.tsx b/src/nextapp/components/edit-display-name/edit-display-name.tsx
index 28a859585..a84bc6306 100644
--- a/src/nextapp/components/edit-display-name/edit-display-name.tsx
+++ b/src/nextapp/components/edit-display-name/edit-display-name.tsx
@@ -33,7 +33,7 @@ const EditNamespaceDisplayName: React.FC<EditNamespaceDisplayNameProps> = ({
   queryKey,
 }) => {
   const toast = useToast();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isOpen, onOpen, onClose: originalOnClose } = useDisclosure();
   const queryClient = useQueryClient();
   const mutate = useApiMutation(mutation);
   const [inputValue, setInputValue] = React.useState(data.displayName || '');
@@ -68,7 +68,7 @@ const EditNamespaceDisplayName: React.FC<EditNamespaceDisplayNameProps> = ({
           const entries = Object.fromEntries(formData);
           await mutate.mutateAsync(entries);
           queryClient.invalidateQueries(queryKey);
-          onClose();
+          originalOnClose();
           toast({
             title: 'Display name successfully edited',
             status: 'success',
@@ -92,6 +92,14 @@ const EditNamespaceDisplayName: React.FC<EditNamespaceDisplayNameProps> = ({
 
   const isInputValid = charCount >= minCharLimit && charCount <= maxCharLimit && isValidFormat;
 
+  // Add this new function to handle closing and resetting
+  const handleClose = () => {
+    setInputValue(data.displayName || '');
+    setCharCount(data.displayName?.length || 0);
+    setIsValidFormat(true);
+    originalOnClose();
+  };
+
   return (
     <>
       <Button
@@ -104,7 +112,7 @@ const EditNamespaceDisplayName: React.FC<EditNamespaceDisplayNameProps> = ({
       >
         Edit
       </Button>
-      <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal isOpen={isOpen} onClose={handleClose}>
         <ModalOverlay />
         <ModalContent borderRadius="4px" px={11}>
           <ModalHeader pt={10}>Edit display name</ModalHeader>
@@ -154,7 +162,7 @@ const EditNamespaceDisplayName: React.FC<EditNamespaceDisplayNameProps> = ({
             <ButtonGroup>
               <Button
                 px={7}
-                onClick={onClose}
+                onClick={handleClose}
                 variant="secondary"
                 data-testid="edit-display-name-cancel-btn"
               >