fix(ContextMenu): Disable scrolling when open

Menu appears in the wrong position when the user is scrolling.
Royal-Navy · Apr 27, 2021 · cf16502 · cf16502
1 parent 4f931f3
commit cf16502
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/packages/react-component-library/src/components/ContextMenu/ContextMenu.test.tsx b/packages/react-component-library/src/components/ContextMenu/ContextMenu.test.tsx
@@ -3,6 +3,7 @@ import '@testing-library/jest-dom/extend-expect'
 import { RenderResult, render, fireEvent, act } from '@testing-library/react'
 import { IconSettings } from '@royalnavy/icon-library'
 import 'jest-styled-components'
+import userEvent from '@testing-library/user-event'
 
 import { ContextMenu, ContextMenuItem, ContextMenuDivider } from '.'
 import { Link } from '../Link'
@@ -64,6 +65,7 @@ describe('ContextMenu', () => {
                 link={<Link href="/hello-bar">Hello, Bar!</Link>}
               />
             </ContextMenu>
+            <div data-testid="outside">Outside</div>
           </>
         )
       }
@@ -95,6 +97,30 @@ describe('ContextMenu', () => {
           '0px'
         )
       })
+
+      it('should disable scrolling', () => {
+        expect(wrapper.baseElement).toHaveAttribute(
+          'style',
+          'overflow: hidden;'
+        )
+      })
+
+      describe('and outside is clicked', () => {
+        beforeEach(() => {
+          userEvent.click(wrapper.getByTestId('outside'))
+        })
+
+        it('should hide the context menu', () => {
+          expect(wrapper.queryByTestId('context-menu')).not.toBeVisible()
+        })
+
+        it('should enable scrolling again', () => {
+          expect(wrapper.baseElement).toHaveAttribute(
+            'style',
+            'overflow: auto;'
+          )
+        })
+      })
     })
   })
 

diff --git a/packages/react-component-library/src/hooks/useClickMenu.ts b/packages/react-component-library/src/hooks/useClickMenu.ts
@@ -91,6 +91,11 @@ export const useClickMenu = <TMenuElement extends HTMLElement>({
     }
   })
 
+  useEffect(() => {
+    const body = document.querySelector('body')
+    body.style.overflow = open ? 'hidden' : 'auto'
+  }, [open])
+
   return {
     coordinates,
     menuRef,