🚧 WIP 🚧 fix(components/molecule/drawer): Fix page scrollable issue on mobile safari

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>

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

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;