From a6fceeae5078af5a93c57d98618c7ba8914bbad1 Mon Sep 17 00:00:00 2001
From: Maider Hernandorena <maider.hernandorena@adevinta.com>
Date: Wed, 13 May 2026 16:46:10 +0200
Subject: [PATCH] fix(components/molecule/drawer): Fix page scrollable issue on
 mobile safari

---
 .../drawer/demo/DemoPageScrollable.js         | 19 ++++++++++++++++++-
 components/molecule/drawer/src/index.js       | 11 +++++++++--
 .../molecule/drawer/src/styles/index.scss     |  2 ++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/components/molecule/drawer/demo/DemoPageScrollable.js b/components/molecule/drawer/demo/DemoPageScrollable.js
index 30bbd4fbe7..401cbdee0b 100644
--- a/components/molecule/drawer/demo/DemoPageScrollable.js
+++ b/components/molecule/drawer/demo/DemoPageScrollable.js
@@ -14,6 +14,9 @@ const DemoPageScroll = ({className}) => {
     <Article className={className}>
       <H2>Page scroll</H2>
       <Paragraph>The drawer can avoid the page to scroll when is opened</Paragraph>
+      <Paragraph style={{color: 'red', fontWeight: 'bold'}}>
+        Test on mobile: Open drawer and try scrolling the background. It should be locked!
+      </Paragraph>
       <RadioButton label={<Label>OPEN</Label>} checked={opened} onClick={() => setOpened(!opened)} />
       <br />
       <br />
@@ -37,7 +40,21 @@ const DemoPageScroll = ({className}) => {
             ref={drawerRef}
             closeOnOutsideClick
           >
-            <H4>None</H4>
+            <div style={{padding: '20px'}}>
+              <H4>Drawer Content (should scroll)</H4>
+              <input
+                type="text"
+                name="Field"
+                placeholder="Test input with keyboard"
+                style={{marginTop: '20px', marginBottom: '20px'}}
+              />
+              {Array.from({length: 30}, (_, i) => (
+                <Paragraph key={i}>
+                  Drawer item #{i + 1} - This content should scroll smoothly on iOS. The background should remain locked
+                  even when you focus the input and the keyboard appears.
+                </Paragraph>
+              ))}
+            </div>
           </MoleculeDrawer>
         </div>
       </Box>
diff --git a/components/molecule/drawer/src/index.js b/components/molecule/drawer/src/index.js
index 301d45bdc2..a822735a58 100644
--- a/components/molecule/drawer/src/index.js
+++ b/components/molecule/drawer/src/index.js
@@ -65,8 +65,15 @@ const MoleculeDrawer = forwardRef(
       }
     })
 
-    const blockScrollPage = () => (document.body.style.overflow = 'hidden')
-    const enableScrollPage = () => (document.body.style.overflow = 'auto')
+    const blockScrollPage = () => {
+      document.body.style.overflow = 'hidden'
+      document.body.style.touchAction = 'none'
+    }
+
+    const enableScrollPage = () => {
+      document.body.style.overflow = 'auto'
+      document.body.style.touchAction = 'auto'
+    }
 
     return (
       <div
diff --git a/components/molecule/drawer/src/styles/index.scss b/components/molecule/drawer/src/styles/index.scss
index c580c78985..d0c974a997 100644
--- a/components/molecule/drawer/src/styles/index.scss
+++ b/components/molecule/drawer/src/styles/index.scss
@@ -18,6 +18,8 @@ $base-class: '.sui-MoleculeDrawer';
     position: absolute;
     background-color: $bgc-molecule-drawer;
     display: block;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
 
     &--animationDuration {
       transition-property: transform;