fix(form-ux): create smoothness between nested dialogs

TickLabVN · Oct 1, 2023 · 96b899a · 96b899a
1 parent c9e391b
commit 96b899a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/home/ChooseFileBox.tsx b/src/components/home/ChooseFileBox.tsx
@@ -3,12 +3,10 @@ import { Dialog, DialogBody } from '@material-tailwind/react';
 import { useUploadDocumentBox } from './UploadDocumentBox';
 
 // Loc's task in here.
-// This style is using custom hook. See ../common/SidebarMenu.tsx
 // This hook is used in ./src/pages/HomePage.tsx
 
 export function useChooseFileBox() {
   const { openUploadDocumentBox, UploadDocumentBox } = useUploadDocumentBox();
-
   const [openBox, setOpenBox] = useState<boolean>(false);
 
   const ChooseFileBox = useMemo(
@@ -17,7 +15,14 @@ export function useChooseFileBox() {
       return (
         <>
           <Dialog open={openBox} handler={handleOpenBox}>
-            <DialogBody onClick={openUploadDocumentBox}>A</DialogBody>
+            <DialogBody
+              onClick={() => {
+                setOpenBox(false);
+                openUploadDocumentBox();
+              }}
+            >
+              A
+            </DialogBody>
           </Dialog>
           {<UploadDocumentBox />}
         </>

diff --git a/src/components/home/UploadDocumentBox.tsx b/src/components/home/UploadDocumentBox.tsx
@@ -1,14 +1,19 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Dialog, DialogBody } from '@material-tailwind/react';
 
 export function useUploadDocumentBox() {
   const [openBox, setOpenBox] = useState<boolean>(false);
-  const handleOpenBox = () => setOpenBox(!openBox);
 
-  const UploadDocumentBox = () => (
-    <Dialog open={openBox} handler={handleOpenBox} size='xxl'>
-      <DialogBody>A</DialogBody>
-    </Dialog>
+  const UploadDocumentBox = useMemo(
+    () => () => {
+      const handleOpenBox = () => setOpenBox(!openBox);
+      return (
+        <Dialog open={openBox} handler={handleOpenBox} size='xxl'>
+          <DialogBody>A</DialogBody>
+        </Dialog>
+      );
+    },
+    [openBox]
   );
 
   return {