disable body scoll on modal,tests

Author: liuliu-dev

packages/react/src/SelectPanel/SelectPanel.module.css

@@ -226,7 +226,7 @@
 }
 
 .Backdrop {
-  position: absolute;
+  position: fixed;
   inset: 0;
   background-color: var(--overlay-backdrop-bgColor);
 }

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -1193,6 +1193,30 @@ for (const usingRemoveActiveDescendant of [false, true]) {
         expect(screen.getByRole('button', {name: 'Save'})).toBeInTheDocument()
         expect(screen.getByRole('button', {name: 'Cancel'})).toBeInTheDocument()
       })
+
+      it('locks body scroll when modal is open', async () => {
+        const user = userEvent.setup()
+
+        renderWithProp(<BasicSelectPanel variant="modal" onCancel={() => {}} />, usingRemoveActiveDescendant)
+
+        expect(document.body.style.overflow).not.toBe('hidden')
+
+        await user.click(screen.getByText('Select items'))
+
+        expect(document.body.style.overflow).toBe('hidden')
+      })
+
+      it('restores body scroll when modal is closed', async () => {
+        const user = userEvent.setup()
+
+        renderWithProp(<BasicSelectPanel variant="modal" onCancel={() => {}} />, usingRemoveActiveDescendant)
+
+        await user.click(screen.getByText('Select items'))
+        expect(document.body.style.overflow).toBe('hidden')
+
+        await user.click(screen.getByRole('button', {name: 'Cancel'}))
+        expect(document.body.style.overflow).not.toBe('hidden')
+      })
     })
 
     describe('sorting', () => {

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -362,9 +362,9 @@ function Panel({
     [items, itemsInViewSet, onSelectedChange, selected],
   )
 
-  // disable body scroll when the panel is open on narrow screens
+  // disable body scroll when the panel is open in modal mode or on narrow screens
   useEffect(() => {
-    if (open && isNarrowScreenSize && usingFullScreenOnNarrow) {
+    if (open && (variant === 'modal' || (isNarrowScreenSize && usingFullScreenOnNarrow))) {
       const bodyOverflowStyle = document.body.style.overflow || ''
       // If the body is already set to overflow: hidden, it likely means
       // that there is already a modal open. In that case, we should bail
@@ -379,7 +379,7 @@ function Panel({
         document.body.style.overflow = bodyOverflowStyle
       }
     }
-  }, [isNarrowScreenSize, open, usingFullScreenOnNarrow])
+  }, [isNarrowScreenSize, open, usingFullScreenOnNarrow, variant])
 
   useEffect(() => {
     if (open) {