fix(DrawerList): reset "enable_body_lock" handlers after closing (#1629)

dnbexperience · Oct 13, 2022 · 1a90c72 · 1a90c72
1 parent 2fd64b5
commit 1a90c72
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/...ign-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md b/...ign-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md
@@ -17,7 +17,7 @@ showTabs: true
 | `keep_open`                                 | _(optional)_ If set to true, the DrawerList will close on outside clicks, but not on selection. Defaults to `false`.                                                                                                                                                                                                                                                                                                                                                                 |
 | `independent_width`                         | _(optional)_ If set to true, the DrawerList will handle it's width and position handling independent to the parent/mother element. Defaults to `false`.                                                                                                                                                                                                                                                                                                                              |
 | `fixedPosition`                             | _(optional)_ If set to true, the DrawerList will be fixed in it's scroll position by using CSS `position: fixed;`. Defaults to `false`.                                                                                                                                                                                                                                                                                                                                              |
-| `enable_body_lock`                          | _(optional)_ If set to true, the HTML body will get locked from scrolling. Defaults to `false`.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `enable_body_lock`                          | _(optional)_ If set to true, the HTML body will get locked from scrolling when the Dropdown is open. Defaults to `false`.                                                                                                                                                                                                                                                                                                                                                            |
 | `skip_keysearch`                            | _(optional)_ If set to true, search items by the first key will be ignored. Defaults to `false`.                                                                                                                                                                                                                                                                                                                                                                                     |
 | `ignore_events`                             | _(optional)_ If set to true, all keyboard and mouse events will be ignored. Defaults to `false`.                                                                                                                                                                                                                                                                                                                                                                                     |
 | `align_drawer`                              | _(optional)_ use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if a independent width is used. Defaults to `left`.                                                                                                                                                                                                                                                                          |

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListProvider.js b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListProvider.js
@@ -116,8 +116,8 @@ export default class DrawerListProvider extends React.PureComponent {
     clearTimeout(this._scrollTimeout)
     clearTimeout(this._ddTimeout)
 
-    this.setActiveState(false)
     this.removeObservers()
+    this.setActiveState(false)
   }
 
   refreshScrollObserver() {
@@ -1127,6 +1127,8 @@ export default class DrawerListProvider extends React.PureComponent {
       })
 
       const delayHandler = () => {
+        this.removeObservers()
+
         this.setState({
           hidden: true,
           isOpen: false,
@@ -1137,7 +1139,6 @@ export default class DrawerListProvider extends React.PureComponent {
         DrawerListProvider.isOpen = false
 
         this.setActiveState(false)
-        this.removeObservers()
       }
 
       if (isTrue(this.props.no_animation)) {

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js
@@ -12,6 +12,7 @@ import {
   loadScss,
   attachToBody,
 } from '../../../core/jest/jestSetup'
+import { render } from '@testing-library/react'
 import Component from '../DrawerList'
 
 import {
@@ -250,6 +251,26 @@ describe('DrawerList component', () => {
     ).toBe(false)
   })
 
+  it('will lock body scroll when enable_body_lock is true', () => {
+    const MockComponent = (p) => (
+      <Component {...props} data={mockData} enable_body_lock {...p} />
+    )
+
+    const { rerender } = render(<MockComponent opened={false} />)
+
+    expect(document.body.getAttribute('style')).toBe(null)
+
+    rerender(<MockComponent opened />)
+
+    expect(document.body.getAttribute('style')).toBe(
+      'overflow: hidden; height: auto; box-sizing: border-box; margin-right: 0px;'
+    )
+
+    rerender(<MockComponent opened={false} />)
+
+    expect(document.body.getAttribute('style')).toBe('')
+  })
+
   it('has valid on_change callback', () => {
     const on_change = jest.fn()
     const on_select = jest.fn()