fix(header-bar): use layer method to close menu on outside click

dhis2 · Feb 14, 2024 · b9667b3 · b9667b3
1 parent 55d3d8c
commit b9667b3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 27 deletions.
diff --git a/components/header-bar/package.json b/components/header-bar/package.json
@@ -22,7 +22,7 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5005",
+        "start": "start-storybook -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
@@ -46,6 +46,7 @@
         "@dhis2-ui/logo": "9.2.0",
         "@dhis2-ui/menu": "9.2.0",
         "@dhis2-ui/modal": "9.2.0",
+        "@dhis2-ui/popper": "9.2.0",
         "@dhis2-ui/user-avatar": "9.2.0",
         "@dhis2/prop-types": "^3.1.2",
         "@dhis2/ui-constants": "9.2.0",

diff --git a/components/header-bar/src/apps.js b/components/header-bar/src/apps.js
@@ -1,10 +1,12 @@
 import { Card } from '@dhis2-ui/card'
 import { InputField } from '@dhis2-ui/input'
+import { Layer } from '@dhis2-ui/layer'
+import { Popper } from '@dhis2-ui/popper'
 import { useConfig } from '@dhis2/app-runtime'
 import { colors, spacers, theme } from '@dhis2/ui-constants'
 import { IconApps24, IconSettings24 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
-import React, { useState, useEffect, useCallback, useRef } from 'react'
+import React, { useState, useCallback, useRef } from 'react'
 import { Link, useInRouterContext } from 'react-router-dom'
 import css from 'styled-jsx/css'
 import { joinPath } from './join-path.js'
@@ -215,14 +217,6 @@ const AppMenu = ({ apps, filter, onFilterChange }) => (
             <Search value={filter} onChange={onFilterChange} />
             <List apps={apps} filter={filter} />
         </Card>
-
-        <style jsx>{`
-            div {
-                z-index: 10000;
-                position: absolute;
-                right: -4px;
-            }
-        `}</style>
     </div>
 )
 
@@ -236,22 +230,13 @@ const Apps = ({ apps }) => {
     const [show, setShow] = useState(false)
     const [filter, setFilter] = useState('')
 
-    const handleVisibilityToggle = useCallback(() => setShow(!show), [show])
+    const handleVisibilityToggle = useCallback(() => setShow((s) => !s), [])
     const handleFilterChange = useCallback(({ value }) => setFilter(value), [])
 
-    const containerEl = useRef(null)
-    const onDocClick = useCallback((evt) => {
-        if (containerEl.current && !containerEl.current.contains(evt.target)) {
-            setShow(false)
-        }
-    }, [])
-    useEffect(() => {
-        document.addEventListener('click', onDocClick)
-        return () => document.removeEventListener('click', onDocClick)
-    }, [onDocClick])
+    const containerRef = useRef(null)
 
     return (
-        <div ref={containerEl} data-test="headerbar-apps">
+        <div ref={containerRef} data-test="headerbar-apps">
             <button
                 onClick={handleVisibilityToggle}
                 data-test="headerbar-apps-icon"
@@ -260,11 +245,15 @@ const Apps = ({ apps }) => {
             </button>
 
             {show ? (
-                <AppMenu
-                    apps={apps}
-                    filter={filter}
-                    onFilterChange={handleFilterChange}
-                />
+                <Layer onBackdropClick={handleVisibilityToggle}>
+                    <Popper reference={containerRef} placement="bottom-end">
+                        <AppMenu
+                            apps={apps}
+                            filter={filter}
+                            onFilterChange={handleFilterChange}
+                        />
+                    </Popper>
+                </Layer>
             ) : null}
 
             <style jsx>{`

diff --git a/components/header-bar/src/header-bar.stories.js b/components/header-bar/src/header-bar.stories.js
@@ -188,6 +188,8 @@ export const WithGlobalShellRouter = () => (
     <CustomDataProvider data={customData}>
         <HashRouter basename="/">
             <HeaderBar appName="Example!" />
+            {/* To test the menu closing functionality */}
+            <iframe width={'100%'} height={'400px'} src={'https://dhis2.org'} />
         </HashRouter>
     </CustomDataProvider>
 )