ensure dialog is closed on unmount (#3650)

Revert "properly check if the ref is null"

This reverts commit 8f563808a5d39389b0bc47a31e73cd147d1e7e8b.

properly check if the ref is null

ensure dialog is closed on unmount

2 files changed, 81 insertions, 0 deletions

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 859e4965c..e5a6792db 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -152,6 +152,12 @@ export function Outer({
     [open, close],
   )
 
+  React.useEffect(() => {
+    return () => {
+      setDialogIsOpen(control.id, false)
+    }
+  }, [control.id, setDialogIsOpen])
+
   const context = React.useMemo(() => ({close}), [close])
 
   return (
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index f68f9f4dd..6d166d4b6 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -14,6 +14,43 @@ export function Dialogs() {
   const prompt = Prompt.usePromptControl()
   const testDialog = Dialog.useDialogControl()
   const {closeAllDialogs} = useDialogStateControlContext()
+  const unmountTestDialog = Dialog.useDialogControl()
+  const [shouldRenderUnmountTest, setShouldRenderUnmountTest] =
+    React.useState(false)
+  const unmountTestInterval = React.useRef<number>()
+
+  const onUnmountTestStartPressWithClose = () => {
+    setShouldRenderUnmountTest(true)
+
+    setTimeout(() => {
+      unmountTestDialog.open()
+    }, 1000)
+
+    setTimeout(() => {
+      unmountTestDialog.close()
+    }, 4950)
+
+    setInterval(() => {
+      setShouldRenderUnmountTest(prev => !prev)
+    }, 5000)
+  }
+
+  const onUnmountTestStartPressWithoutClose = () => {
+    setShouldRenderUnmountTest(true)
+
+    setTimeout(() => {
+      unmountTestDialog.open()
+    }, 1000)
+
+    setInterval(() => {
+      setShouldRenderUnmountTest(prev => !prev)
+    }, 5000)
+  }
+
+  const onUnmountTestEndPress = () => {
+    setShouldRenderUnmountTest(false)
+    clearInterval(unmountTestInterval.current)
+  }
 
   return (
     <View style={[a.gap_md]}>
@@ -70,6 +107,33 @@ export function Dialogs() {
         <ButtonText>Open Tester</ButtonText>
       </Button>
 
+      <Button
+        variant="solid"
+        color="primary"
+        size="small"
+        onPress={onUnmountTestStartPressWithClose}
+        label="two">
+        <ButtonText>Start Unmount Test With `.close()` call</ButtonText>
+      </Button>
+
+      <Button
+        variant="solid"
+        color="primary"
+        size="small"
+        onPress={onUnmountTestStartPressWithoutClose}
+        label="two">
+        <ButtonText>Start Unmount Test Without `.close()` call</ButtonText>
+      </Button>
+
+      <Button
+        variant="solid"
+        color="primary"
+        size="small"
+        onPress={onUnmountTestEndPress}
+        label="two">
+        <ButtonText>End Unmount Test</ButtonText>
+      </Button>
+
       <Prompt.Outer control={prompt}>
         <Prompt.TitleText>This is a prompt</Prompt.TitleText>
         <Prompt.DescriptionText>
@@ -257,6 +321,17 @@ export function Dialogs() {
           </View>
         </Dialog.ScrollableInner>
       </Dialog.Outer>
+
+      {shouldRenderUnmountTest && (
+        <Dialog.Outer control={unmountTestDialog}>
+          <Dialog.Handle />
+
+          <Dialog.Inner label="test">
+            <H3 nativeID="dialog-title">Unmount Test Dialog</H3>
+            <P nativeID="dialog-description">Will unmount in about 5 seconds</P>
+          </Dialog.Inner>
+        </Dialog.Outer>
+      )}
     </View>
   )
 }