fix: dialog positioning issue

PolkaGate · Nov 20, 2024 · 5954fda · 5954fda
1 parent 7ee4e20
commit 5954fda
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 38 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx
@@ -4,7 +4,7 @@
 /* eslint-disable react/jsx-max-props-per-line */
 
 import { Dialog, Grid, Slide, Typography, useTheme } from '@mui/material';
-import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import Infotip2 from '../../../components/Infotip2';
 import { getStorage } from '../../../components/Loading';
@@ -29,12 +29,19 @@ interface Props {
 
 function Currency ({ borderColor, color, dialogLeft = 260, fontSize = '22px', height, minWidth }: Props): React.ReactElement {
   const theme = useTheme();
+  const ref = useRef<DOMRect>();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [currencyToShow, setCurrencyToShow] = useState<CurrencyItemType | undefined>();
 
   const textColor = useMemo(() => color || (theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary), [color, theme]);
 
+  useEffect(() => {
+    if (anchorEl?.getBoundingClientRect()) {
+      ref.current = anchorEl.getBoundingClientRect();
+    }
+  }, [anchorEl]);
+
   useLayoutEffect(() => {
     if (currencyToShow) {
       return;
@@ -71,39 +78,37 @@ function Currency ({ borderColor, color, dialogLeft = 260, fontSize = '22px', he
           </Typography>
         </Infotip2>
       </Grid>
-      {anchorEl &&
-        <Dialog
-          PaperProps={{
+      <Dialog
+        PaperProps={{
+          sx: {
+            bgcolor: 'background.paper',
+            borderRadius: '7px',
+            boxShadow: theme.palette.mode === 'dark'
+              ? '0px 4px 4px rgba(255, 255, 255, 0.25)'
+              : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)',
+            left: ((anchorEl?.getBoundingClientRect() || ref.current)?.right ?? 0) - dialogLeft,
+            position: 'absolute',
+            top: ((anchorEl?.getBoundingClientRect() || ref.current)?.bottom ?? 0) - 30
+          }
+        }}
+        TransitionComponent={Slide}
+        onClose={handleClose}
+        open={!!anchorEl}
+        slotProps={{
+          backdrop: {
             sx: {
-              bgcolor: 'background.paper',
-              borderRadius: '7px',
-              boxShadow: theme.palette.mode === 'dark'
-                ? '0px 4px 4px rgba(255, 255, 255, 0.25)'
-                : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)',
-              left: anchorEl?.getBoundingClientRect().right - dialogLeft,
-              position: 'absolute',
-              top: anchorEl?.getBoundingClientRect().bottom - 30
+              backdropFilter: 'blur(8px)',
+              backgroundColor: 'rgba(0, 0, 0, 0.3)'
             }
-          }}
-          TransitionComponent={Slide}
-          onClose={handleClose}
-          open={!!anchorEl}
-          slotProps={{
-            backdrop: {
-              sx: {
-                backdropFilter: 'blur(8px)',
-                backgroundColor: 'rgba(0, 0, 0, 0.3)'
-              }
-            }
-          }}
-        >
-          <CurrencyList
-            anchorEl={anchorEl}
-            setAnchorEl={setAnchorEl}
-            setCurrencyToShow={setCurrencyToShow}
-          />
-        </Dialog>
-      }
+          }
+        }}
+      >
+        <CurrencyList
+          anchorEl={anchorEl}
+          setAnchorEl={setAnchorEl}
+          setCurrencyToShow={setCurrencyToShow}
+        />
+      </Dialog>
     </>
   );
 }

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx
@@ -6,7 +6,7 @@
 import { faSliders } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Badge, Dialog, Grid, Slide, useTheme } from '@mui/material';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useIsTestnetEnabled, useSelectedChains } from '../../../hooks';
 import { TEST_NETS } from '../../../util/constants';
@@ -19,11 +19,18 @@ export default function FavoriteChains (): React.ReactElement {
   const theme = useTheme();
   const selectedChains = useSelectedChains();
   const isTestNetEnabled = useIsTestnetEnabled();
+  const ref = useRef<DOMRect>();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
   const color = theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary;
 
+  useEffect(() => {
+    if (anchorEl?.getBoundingClientRect()) {
+      ref.current = anchorEl.getBoundingClientRect();
+    }
+  }, [anchorEl]);
+
   const onChainListClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(anchorEl ? null : event.currentTarget);
   }, [anchorEl]);
@@ -53,7 +60,7 @@ export default function FavoriteChains (): React.ReactElement {
       sx={{
         '& .MuiBadge-badge': {
           color: 'white'
-        },
+        }
       }}
     >
       <Grid
@@ -72,7 +79,6 @@ export default function FavoriteChains (): React.ReactElement {
           icon={faSliders}
         />
       </Grid>
-      { anchorEl &&
       <Dialog
         PaperProps={{
           sx: {
@@ -81,9 +87,9 @@ export default function FavoriteChains (): React.ReactElement {
             boxShadow: theme.palette.mode === 'dark'
               ? '0px 4px 4px rgba(255, 255, 255, 0.25)'
               : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)',
-            left: anchorEl?.getBoundingClientRect().right - 310,
+            left: ((anchorEl?.getBoundingClientRect() || ref.current)?.right ?? 0) - 310,
             position: 'absolute',
-            top: anchorEl?.getBoundingClientRect().bottom - 30
+            top: ((anchorEl?.getBoundingClientRect() || ref.current)?.bottom ?? 0) - 30
           }
         }}
         TransitionComponent={Slide}
@@ -99,7 +105,7 @@ export default function FavoriteChains (): React.ReactElement {
         }}
       >
         <ChainList anchorEl={anchorEl} />
-      </Dialog>}
+      </Dialog>
     </Badge>
   );
 }