fix: don't keep bottom sheet mounted

lifinance · Oct 6, 2022 · 861bec5 · 861bec5
1 parent 6083a86
commit 861bec5
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -35,6 +35,7 @@ const RelativeContainer = styled(Box, {
 const CssBaselineContainer = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ variant }) => ({
+  position: 'relative',
   display: 'flex',
   flex: 1,
   flexDirection: 'column',

diff --git a/packages/widget/src/components/BottomSheet/BottomSheet.tsx b/packages/widget/src/components/BottomSheet/BottomSheet.tsx
@@ -47,7 +47,6 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
             position: 'absolute',
             overflow: 'hidden',
           },
-          keepMounted: true,
         }}
         PaperProps={{
           sx: (theme) => ({
@@ -67,6 +66,10 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
         SlideProps={{
           container: containerElement,
         }}
+        disableAutoFocus
+        disableEnforceFocus
+        disableScrollLock
+        disablePortal
       >
         {children}
       </Drawer>

diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -34,9 +34,9 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   const { navigateBack, navigate } = useNavigateBack();
   const ref = useRef<BottomSheetBase>(null);
   const { getChainById } = useChains();
+  const { setValue } = useFormContext();
   const { token, refetch, refetchNewBalance, refetchAllBalances } =
     useTokenBalance(route.toToken, route.toAddress);
-  const { setValue } = useFormContext();
 
   const clearFromAmount = () => {
     refetchAllBalances();