Merge branch 'fix-modal-state-update'

2 files changed, 16 insertions, 13 deletions

diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 97631caec4..8e0d099b5b 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -162,31 +162,34 @@ interface IModalAlertProps {
   close?: () => void;
 }
 
+interface OpenState {
+  isClosing: boolean;
+  wasOpen: boolean;
+}
+
 export function ModalAlert(props: IModalAlertProps & { isOpen: boolean }) {
   const { isOpen, ...otherProps } = props;
   const activeModalContext = useContext(ActiveModalContext);
-  const [closing, setClosing] = useState(false);
-  const prevIsOpen = useRef(isOpen);
+  const [openState, setOpenState] = useState<OpenState>({ isClosing: false, wasOpen: isOpen });
 
   const willExit = useWillExit();
 
   // Modal shouldn't prepare for being opened again while view is disappearing.
   const onTransitionEnd = useCallback(() => {
     if (!willExit) {
-      setClosing(false);
+      setOpenState({ isClosing: false, wasOpen: isOpen });
     }
-  }, [willExit]);
+  }, [willExit, isOpen]);
 
   useEffect(() => {
-    setClosing((closing) => closing || (prevIsOpen.current && !isOpen));
-
-    // Unmounting the Modal during view transitions result in a visual glitch.
-    if (!willExit) {
-      prevIsOpen.current = isOpen;
-    }
+    setOpenState(({ isClosing, wasOpen }) => ({
+      isClosing: isClosing || (wasOpen && !isOpen),
+      // Unmounting the Modal during view transitions result in a visual glitch.
+      wasOpen: willExit ? wasOpen : isOpen,
+    }));
   }, [isOpen]);
 
-  if (!prevIsOpen.current && !isOpen && !closing) {
+  if (!openState.wasOpen && !isOpen && !openState.isClosing) {
     return null;
   }
 
@@ -194,7 +197,7 @@ export function ModalAlert(props: IModalAlertProps & { isOpen: boolean }) {
     <ModalAlertImpl
       {...activeModalContext}
       {...otherProps}
-      closing={closing}
+      closing={openState.isClosing}
       onTransitionEnd={onTransitionEnd}
     />
   );
diff --git a/gui/src/renderer/components/RedeemVoucher.tsx b/gui/src/renderer/components/RedeemVoucher.tsx
index 98cba482aa..34cc89c4b0 100644
--- a/gui/src/renderer/components/RedeemVoucher.tsx
+++ b/gui/src/renderer/components/RedeemVoucher.tsx
@@ -201,7 +201,7 @@ export function RedeemVoucherSubmitButton() {
   const disabled = submitting || response?.type === 'success';
 
   return (
-    <AppButton.GreenButton key="cancel" disabled={!valueValid || disabled} onClick={onSubmit}>
+    <AppButton.GreenButton disabled={!valueValid || disabled} onClick={onSubmit}>
       {messages.pgettext('redeem-voucher-view', 'Redeem')}
     </AppButton.GreenButton>
   );