more

pinterest · Sep 20, 2024 · dbe5382 · dbe5382
1 parent c03e5c0
commit dbe5382
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 11 deletions.
diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -108,6 +108,9 @@ export default function PartialPage({
   // Consumes AnimationProvider & RequestAnimationFrameProvider
   const { animationState, handleAnimationEnd } = useAnimation();
   const { handleRequestAnimationFrame, onExternalDismiss } = useRequestAnimationFrame();
+  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
+  // eslint-disable-next-line no-console
+  console.log(isOnScreenKeyboardOpen);
 
   const handleOnAnimationEnd = useCallback(() => {
     handleAnimationEnd();
@@ -136,8 +139,6 @@ export default function PartialPage({
   // When SheetMobile is full page displayed in mobile browser, the body scroll is still accessible. Here we disable to just allow the scrolling within Modal
   useEffect(() => {
     let prevOverflowStyle = 'auto';
-    // eslint-disable-next-line no-console
-    console.log('useEffect');
 
     // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
     if (window && window.body?.style?.overflow) {
@@ -147,8 +148,6 @@ export default function PartialPage({
       window.body.style.overflow = 'hidden';
     }
     return () => {
-      // eslint-disable-next-line no-console
-      console.log('return');
       // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
       if (window && window.body?.style?.overflow) {
         // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
@@ -157,6 +156,28 @@ export default function PartialPage({
     };
   }, []);
 
+  // When SheetMobile is full page displayed in mobile browser, the body scroll is still accessible. Here we disable to just allow the scrolling within Modal
+  useEffect(() => {
+    let prevOverflowStyle = 'auto';
+    // eslint-disable-next-line no-console
+    console.log('useEffect');
+
+    if (isOnScreenKeyboardOpen) {
+      // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
+      prevOverflowStyle = window.body.style.overflow;
+      // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
+      window.body.style.overflow = 'hidden';
+    }
+
+    if (!isOnScreenKeyboardOpen) {
+      // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
+      if (window && window.body?.style?.overflow) {
+        // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
+        window.body.style.overflow = prevOverflowStyle;
+      }
+    }
+  }, [isOnScreenKeyboardOpen]);
+
   // Use useLayoutEffect instead of useEffect as we need to close the component synchronously after all DOM mutations, useEffect was needed to prevent changing state while still rendering but useEffect will create a ms blink of the full OverlayPanel after closing which gets prevented with useLayoutEffect
   useLayoutEffect(() => {
     if (animationState === ANIMATION_STATE.unmount) {
@@ -176,10 +197,6 @@ export default function PartialPage({
     [closeOnOutsideClick, onExternalDismiss, onOutsideClick],
   );
 
-  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
-  // eslint-disable-next-line no-console
-  console.log(isOnScreenKeyboardOpen);
-
   return (
     <StopScrollBehavior>
       <TrapFocusBehavior>

diff --git a/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useDeviceType } from '../contexts/DeviceTypeProvider';
 
 const isKeyboardInput = (elem: HTMLElement) => {
   // eslint-disable-next-line no-console
@@ -12,6 +13,9 @@ const isKeyboardInput = (elem: HTMLElement) => {
   );
 };
 const useIsOnScreenKeyboardOpen = () => {
+  const deviceType = useDeviceType();
+  const isMobile = deviceType === 'mobile';
+
   const [isOpen, setOpen] = useState(false);
 
   useEffect(() => {
@@ -20,7 +24,7 @@ const useIsOnScreenKeyboardOpen = () => {
         return;
       }
       const target = e.target as HTMLElement;
-      if (isKeyboardInput(target)) {
+      if (isMobile && isKeyboardInput(target)) {
         setOpen(true);
       }
     };
@@ -32,7 +36,7 @@ const useIsOnScreenKeyboardOpen = () => {
         return;
       }
       const target = e.target as HTMLElement;
-      if (isKeyboardInput(target)) {
+      if (isMobile && isKeyboardInput(target)) {
         setOpen(false);
       }
     };
@@ -43,7 +47,7 @@ const useIsOnScreenKeyboardOpen = () => {
       document.removeEventListener('focusin', handleFocusIn);
       document.removeEventListener('focusout', handleFocusOut);
     };
-  }, []);
+  }, [isMobile]);
 
   return isOpen;
 };