From f9dac229a91ef9361dd6df6371a765ecc91f0130 Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 01:30:30 +0200
Subject: [PATCH 01/13] fix?

---
 .../gestalt/src/SheetMobile/PartialPage.tsx   |  5 +++
 .../SheetMobile/useIsOnScreenKeyboardOpen.tsx | 43 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index 9a5f82aa92..fa7a22a130 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -2,6 +2,7 @@ import { ComponentProps, ReactNode, useCallback, useEffect, useId, useLayoutEffe
 import classnames from 'classnames';
 import ContentContainer from './ContentContainer';
 import Header from './Header';
+import useIsOnScreenKeyboardOpen from './useIsOnScreenKeyboardOpen';
 import animation from '../animation/animation.css';
 import { ANIMATION_STATE, useAnimation } from '../animation/AnimationContext';
 import { useRequestAnimationFrame } from '../animation/RequestAnimationFrameContext';
@@ -171,6 +172,10 @@ 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
new file mode 100644
index 0000000000..6418a2d114
--- /dev/null
+++ b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+
+const isKeyboardInput = (elem: HTMLElement) =>
+  (elem.tagName === 'INPUT' &&
+    !['date', 'number', 'email', 'password', 'tel', 'text', 'url'].includes(
+      (elem as HTMLInputElement).type,
+    )) ||
+  elem.hasAttribute('contenteditable');
+
+const useIsOnScreenKeyboardOpen = () => {
+  const [isOpen, setOpen] = useState(false);
+  useEffect(() => {
+    const handleFocusIn = (e: FocusEvent) => {
+      if (!e.target) {
+        return;
+      }
+      const target = e.target as HTMLElement;
+      if (isKeyboardInput(target)) {
+        setOpen(true);
+      }
+    };
+    document.addEventListener('focusin', handleFocusIn);
+    const handleFocusOut = (e: FocusEvent) => {
+      if (!e.target) {
+        return;
+      }
+      const target = e.target as HTMLElement;
+      if (isKeyboardInput(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('focusout', handleFocusOut);
+    };
+  }, []);
+
+  return isOpen;
+};
+
+export default useIsOnScreenKeyboardOpen;

From 5512f8594fda05bb6e920376807d8620145db0cf Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 01:32:26 +0200
Subject: [PATCH 02/13] more

---
 packages/gestalt/src/SheetMobile/PartialPage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index fa7a22a130..d2186584ef 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -136,6 +136,8 @@ 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) {
@@ -145,6 +147,8 @@ 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'.
@@ -172,10 +176,10 @@ export default function PartialPage({
     [closeOnOutsideClick, onExternalDismiss, onOutsideClick],
   );
 
-  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen()
+  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
   // eslint-disable-next-line no-console
   console.log(isOnScreenKeyboardOpen);
-  
+
   return (
     <StopScrollBehavior>
       <TrapFocusBehavior>

From d1d6ee1e1810a811151467bda7a9c72dda522618 Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 02:41:54 +0200
Subject: [PATCH 03/13] moe

---
 packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
index 6418a2d114..bcc54d2dcf 100644
--- a/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
+++ b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 const isKeyboardInput = (elem: HTMLElement) =>
   (elem.tagName === 'INPUT' &&
-    !['date', 'number', 'email', 'password', 'tel', 'text', 'url'].includes(
+    ['date', 'number', 'email', 'password', 'tel', 'text', 'url'].includes(
       (elem as HTMLInputElement).type,
     )) ||
   elem.hasAttribute('contenteditable');

From c03e5c02ba11b781b4c2296493dfa389c84dcf57 Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 02:44:06 +0200
Subject: [PATCH 04/13] moe

---
 .../SheetMobile/useIsOnScreenKeyboardOpen.tsx | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
index bcc54d2dcf..230089894e 100644
--- a/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
+++ b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
@@ -1,14 +1,19 @@
 import { useEffect, useState } from 'react';
 
-const isKeyboardInput = (elem: HTMLElement) =>
-  (elem.tagName === 'INPUT' &&
-    ['date', 'number', 'email', 'password', 'tel', 'text', 'url'].includes(
-      (elem as HTMLInputElement).type,
-    )) ||
-  elem.hasAttribute('contenteditable');
-
+const isKeyboardInput = (elem: HTMLElement) => {
+  // eslint-disable-next-line no-console
+  console.log(elem);
+  return (
+    (elem.tagName === 'INPUT' &&
+      ['date', 'number', 'email', 'password', 'tel', 'text', 'url'].includes(
+        (elem as HTMLInputElement).type,
+      )) ||
+    elem.hasAttribute('contenteditable')
+  );
+};
 const useIsOnScreenKeyboardOpen = () => {
   const [isOpen, setOpen] = useState(false);
+
   useEffect(() => {
     const handleFocusIn = (e: FocusEvent) => {
       if (!e.target) {
@@ -19,7 +24,9 @@ const useIsOnScreenKeyboardOpen = () => {
         setOpen(true);
       }
     };
+
     document.addEventListener('focusin', handleFocusIn);
+
     const handleFocusOut = (e: FocusEvent) => {
       if (!e.target) {
         return;
@@ -29,6 +36,7 @@ const useIsOnScreenKeyboardOpen = () => {
         setOpen(false);
       }
     };
+
     document.addEventListener('focusout', handleFocusOut);
 
     return () => {

From dbe5382fef14aae67307533cd66e40bbe9bf0830 Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 02:58:12 +0200
Subject: [PATCH 05/13] more

---
 .../gestalt/src/SheetMobile/PartialPage.tsx   | 33 ++++++++++++++-----
 .../SheetMobile/useIsOnScreenKeyboardOpen.tsx | 10 ++++--
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index d2186584ef..5c865eb3d8 100644
--- 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
index 230089894e..f350135bd7 100644
--- 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;
 };

From 59ac858c91fb6bc8499ae4bde261687d9b6ffa85 Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 03:11:59 +0200
Subject: [PATCH 06/13] more

---
 packages/gestalt/src/SheetMobile/PartialPage.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index 5c865eb3d8..928eb1210b 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -158,23 +158,22 @@ 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';
+    let prevOverflowStyleVirtual = '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'.
+    if (window && window.body?.style?.overflow && isOnScreenKeyboardOpen) {
       // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
-      prevOverflowStyle = window.body.style.overflow;
+      prevOverflowStyleVirtual = 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 && !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;
-      }
+      window.body.style.overflow = prevOverflowStyleVirtual;
     }
   }, [isOnScreenKeyboardOpen]);
 

From 00949bcb48e31d46ec5621acfcbf1678ab7344bd Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 03:31:32 +0200
Subject: [PATCH 07/13] more

---
 packages/gestalt/src/SheetMobile/PartialPage.tsx              | 4 ++++
 .../gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx     | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index 928eb1210b..1e6bf7a438 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -168,12 +168,16 @@ export default function PartialPage({
       prevOverflowStyleVirtual = window.body.style.overflow;
       // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
       window.body.style.overflow = 'hidden';
+      // eslint-disable-next-line no-console
+      console.log('hidden');
     }
 
     // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
     if (window && window.body?.style?.overflow && !isOnScreenKeyboardOpen) {
       // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
       window.body.style.overflow = prevOverflowStyleVirtual;
+      // eslint-disable-next-line no-console
+      console.log('unhidden');
     }
   }, [isOnScreenKeyboardOpen]);
 
diff --git a/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
index f350135bd7..34ac2e9515 100644
--- a/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
+++ b/packages/gestalt/src/SheetMobile/useIsOnScreenKeyboardOpen.tsx
@@ -12,6 +12,8 @@ const isKeyboardInput = (elem: HTMLElement) => {
     elem.hasAttribute('contenteditable')
   );
 };
+
+// This hooks detects the on-screen keyboard. In the future we can use the VirtualKeyboard API but it's still experimental and not supported in many browsers. https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard/geometrychange_event
 const useIsOnScreenKeyboardOpen = () => {
   const deviceType = useDeviceType();
   const isMobile = deviceType === 'mobile';

From 1e0567ceeb70fefea5da8e03aacd3218524db58c Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 16:49:52 +0200
Subject: [PATCH 08/13] more

---
 packages/gestalt/src/SheetMobile/PartialPage.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index 1e6bf7a438..f8d6ec683e 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -199,6 +199,18 @@ export default function PartialPage({
     },
     [closeOnOutsideClick, onExternalDismiss, onOutsideClick],
   );
+  // @ts-expect-error - TS2339 -
+  function findScroller(element) {
+    // eslint-disable-next-line no-param-reassign, func-names
+    element.onscroll = function () {
+      // eslint-disable-next-line no-console
+      console.log('scrolls', element);
+    };
+
+    Array.from(element.children).forEach(findScroller);
+  }
+
+  findScroller(document.body);
 
   return (
     <StopScrollBehavior>

From d5c8d99d3b68ff4fdd1be33a092edc44e9d7e5a9 Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 16:49:54 +0200
Subject: [PATCH 09/13] more

---
 packages/gestalt/src/SheetMobile/PartialPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index f8d6ec683e..aa3df30d9e 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -199,7 +199,7 @@ export default function PartialPage({
     },
     [closeOnOutsideClick, onExternalDismiss, onOutsideClick],
   );
-  // @ts-expect-error - TS2339 -
+  // @ts-expect-error - TS2339
   function findScroller(element) {
     // eslint-disable-next-line no-param-reassign, func-names
     element.onscroll = function () {

From f24f29bceb8061e620fcfa422921eac44e07043a Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 17:32:06 +0200
Subject: [PATCH 10/13] more

---
 packages/gestalt/src/SheetMobile/PartialPage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index aa3df30d9e..8afcbdbe97 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -201,6 +201,8 @@ export default function PartialPage({
   );
   // @ts-expect-error - TS2339
   function findScroller(element) {
+    // eslint-disable-next-line no-console
+    console.log('scrollstart');
     // eslint-disable-next-line no-param-reassign, func-names
     element.onscroll = function () {
       // eslint-disable-next-line no-console

From 6c44eade280d8c51a3823ab3ed0d312363aa23db Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 20:13:24 +0200
Subject: [PATCH 11/13] more

---
 .../gestalt/src/SheetMobile/PartialPage.tsx   | 59 +++++++++----------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index 8afcbdbe97..08b1f6ecba 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -158,26 +158,25 @@ 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 prevOverflowStyleVirtual = 'auto';
-    // eslint-disable-next-line no-console
-    console.log('useEffect');
+    const disableScroll = () => {
+      // Get the current page scroll position
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      // if any scroll is attempted,
+      // set this to the previous value
+      window.onscroll = () => {
+        window.scrollTo(scrollLeft, scrollTop);
+      };
+    };
 
-    // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
-    if (window && window.body?.style?.overflow && isOnScreenKeyboardOpen) {
-      // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
-      prevOverflowStyleVirtual = window.body.style.overflow;
-      // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
-      window.body.style.overflow = 'hidden';
-      // eslint-disable-next-line no-console
-      console.log('hidden');
-    }
+    const enableScroll = () => {
+      window.onscroll = () => {};
+    };
 
-    // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
-    if (window && window.body?.style?.overflow && !isOnScreenKeyboardOpen) {
-      // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
-      window.body.style.overflow = prevOverflowStyleVirtual;
-      // eslint-disable-next-line no-console
-      console.log('unhidden');
+    if (isOnScreenKeyboardOpen) {
+      disableScroll();
+    } else {
+      enableScroll();
     }
   }, [isOnScreenKeyboardOpen]);
 
@@ -199,20 +198,20 @@ export default function PartialPage({
     },
     [closeOnOutsideClick, onExternalDismiss, onOutsideClick],
   );
-  // @ts-expect-error - TS2339
-  function findScroller(element) {
-    // eslint-disable-next-line no-console
-    console.log('scrollstart');
-    // eslint-disable-next-line no-param-reassign, func-names
-    element.onscroll = function () {
-      // eslint-disable-next-line no-console
-      console.log('scrolls', element);
-    };
+  // // @ts-expect-error - TS2339
+  // function findScroller(element) {
+  //   // eslint-disable-next-line no-console
+  //   console.log('scrollstart');
+  //   // eslint-disable-next-line no-param-reassign, func-names
+  //   element.onscroll = function () {
+  //     // eslint-disable-next-line no-console
+  //     console.log('scrolls', element);
+  //   };
 
-    Array.from(element.children).forEach(findScroller);
-  }
+  //   Array.from(element.children).forEach(findScroller);
+  // }
 
-  findScroller(document.body);
+  // findScroller(document.body);
 
   return (
     <StopScrollBehavior>

From dc3b0083e8f3e0adcd4303af80af9cba8a4909ad Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 21:15:16 +0200
Subject: [PATCH 12/13] more

---
 packages/gestalt/src/SheetMobile/PartialPage.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index 08b1f6ecba..59ff2bac83 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -144,14 +144,21 @@ export default function PartialPage({
     if (window && window.body?.style?.overflow) {
       // @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'.
+      prevHeightStyle = window.body.style.height;
+
       // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
       window.body.style.overflow = 'hidden';
+      // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
+      window.body.style.height = '100%';
     }
     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'.
         window.body.style.overflow = prevOverflowStyle;
+        // @ts-expect-error - TS2339 - Property 'body' does not exist on type 'Window & typeof globalThis'.
+        window.body.style.height = prevHeightStyle;
       }
     };
   }, []);

From 9117122f7de62502098610742334520b0469646c Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 20 Sep 2024 21:15:39 +0200
Subject: [PATCH 13/13] more

---
 .../gestalt/src/SheetMobile/PartialPage.tsx   | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/gestalt/src/SheetMobile/PartialPage.tsx b/packages/gestalt/src/SheetMobile/PartialPage.tsx
index 59ff2bac83..dbb3483add 100644
--- a/packages/gestalt/src/SheetMobile/PartialPage.tsx
+++ b/packages/gestalt/src/SheetMobile/PartialPage.tsx
@@ -164,28 +164,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(() => {
-    const disableScroll = () => {
-      // Get the current page scroll position
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-      // if any scroll is attempted,
-      // set this to the previous value
-      window.onscroll = () => {
-        window.scrollTo(scrollLeft, scrollTop);
-      };
-    };
+  // useEffect(() => {
+  //   const disableScroll = () => {
+  //     // Get the current page scroll position
+  //     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  //     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+  //     // if any scroll is attempted,
+  //     // set this to the previous value
+  //     window.onscroll = () => {
+  //       window.scrollTo(scrollLeft, scrollTop);
+  //     };
+  //   };
 
-    const enableScroll = () => {
-      window.onscroll = () => {};
-    };
+  //   const enableScroll = () => {
+  //     window.onscroll = () => {};
+  //   };
 
-    if (isOnScreenKeyboardOpen) {
-      disableScroll();
-    } else {
-      enableScroll();
-    }
-  }, [isOnScreenKeyboardOpen]);
+  //   if (isOnScreenKeyboardOpen) {
+  //     disableScroll();
+  //   } else {
+  //     enableScroll();
+  //   }
+  // }, [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(() => {