From d35ffb2715fda0225197fea3d06b19242da95879 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Mon, 6 May 2024 08:13:34 +0300
Subject: [PATCH] feat: enable left and right arrow functionality

---
 .../menu/src/flyout-menu/flyout-menu.js       | 23 +----------
 components/menu/src/menu-item/menu-item.js    | 13 ++++++-
 components/menu/src/menu/menu.js              | 38 +++++++++++++++----
 components/popper/src/popper.js               |  3 ++
 components/popper/types/index.d.ts            |  1 +
 5 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/components/menu/src/flyout-menu/flyout-menu.js b/components/menu/src/flyout-menu/flyout-menu.js
index 4305db9965..c3b4035635 100644
--- a/components/menu/src/flyout-menu/flyout-menu.js
+++ b/components/menu/src/flyout-menu/flyout-menu.js
@@ -1,12 +1,6 @@
 import { colors, elevations, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
-import React, {
-    Children,
-    cloneElement,
-    isValidElement,
-    useState,
-    // useEffect,
-} from 'react'
+import React, { Children, cloneElement, isValidElement, useState } from 'react'
 import { Menu } from '../index.js'
 
 const FlyoutMenu = ({
@@ -17,25 +11,12 @@ const FlyoutMenu = ({
     maxHeight,
     maxWidth,
 }) => {
-    const [openedSubMenu, setOpenedSubMenu] = useState(0)
+    const [openedSubMenu, setOpenedSubMenu] = useState(null)
     const toggleSubMenu = (index) => {
         const toggleValue = index === openedSubMenu ? null : index
         setOpenedSubMenu(toggleValue)
     }
 
-    // useEffect(() => {
-    //     if (openedSubMenu) {
-    //         menuItemRef.current.childNodes[0].focus()
-    //     }
-    // }, [openedSubMenu])
-
-    // console.log(document.activeElement, "flyout menu active element")
-    // // const handleKeydown = () => {
-
-    // // }
-
-    console.log(openedSubMenu, 'opened submenu')
-
     return (
         <div className={className} data-test={dataTest}>
             <Menu dense={dense}>
diff --git a/components/menu/src/menu-item/menu-item.js b/components/menu/src/menu-item/menu-item.js
index f376be1be8..bd25590776 100644
--- a/components/menu/src/menu-item/menu-item.js
+++ b/components/menu/src/menu-item/menu-item.js
@@ -90,6 +90,10 @@ const MenuItem = forwardRef(function MenuItem(
                     aria-disabled={disabled}
                     aria-checked={checkbox && checked}
                     aria-label={label}
+                    aria-owns={
+                        children &&
+                        `popper-${label.split(' ').join('-').toLowerCase()}`
+                    }
                 >
                     {icon && <span className="icon">{icon}</span>}
 
@@ -108,7 +112,14 @@ const MenuItem = forwardRef(function MenuItem(
             </li>
             {children && showSubMenu && (
                 <Portal>
-                    <Popper placement="right-start" reference={menuItemRef}>
+                    <Popper
+                        placement="right-start"
+                        reference={menuItemRef}
+                        id={`popper-${label
+                            .split(' ')
+                            .join('-')
+                            .toLowerCase()}`}
+                    >
                         <FlyoutMenu dense={dense}>{children}</FlyoutMenu>
                     </Popper>
                 </Portal>
diff --git a/components/menu/src/menu/menu.js b/components/menu/src/menu/menu.js
index 30a93a8c0f..9d7a56b877 100644
--- a/components/menu/src/menu/menu.js
+++ b/components/menu/src/menu/menu.js
@@ -33,14 +33,19 @@ const Menu = ({ children, className, dataTest, dense }) => {
         return obj
     }
 
-    const focusFirstFocusableItem = useCallback((e) => {
-        const focusableItems = findFocusableItems()
-
-        if (e.target === menuRef.current) {
-            setFocusedIndex(~~Object.keys(focusableItems)[0])
-            Object.values(focusableItems)[0].focus()
-        }
-    }, [])
+    const focusFirstFocusableItem = useCallback(
+        (e) => {
+            const focusableItems = findFocusableItems()
+
+            if (e.target === menuRef.current) {
+                if (focusedIndex === -1) {
+                    setFocusedIndex(~~Object.keys(focusableItems)[0])
+                    // Object.values(focusableItems)[0].focus()
+                }
+            }
+        },
+        [focusedIndex]
+    )
 
     const setNextFocusableIndex = useCallback(({ elemIndex, action }) => {
         const focusableItems = findFocusableItems()
@@ -99,6 +104,20 @@ const Menu = ({ children, className, dataTest, dense }) => {
                     break
                 case 'ArrowLeft':
                     event.preventDefault()
+                    document
+                        .querySelector(
+                            `[aria-owns='${event.target.parentNode.parentNode.parentNode.parentNode.getAttribute(
+                                'id'
+                            )}']`
+                        )
+                        .focus()
+                    document
+                        .querySelector(
+                            `[aria-owns='${event.target.parentNode.parentNode.parentNode.parentNode.getAttribute(
+                                'id'
+                            )}']`
+                        )
+                        .click()
                     break
                 case ' ':
                 case 'Enter':
@@ -156,6 +175,9 @@ const Menu = ({ children, className, dataTest, dense }) => {
                                   : child.props.hideDivider,
                           tabIndex: focusedIndex === index ? 0 : -1,
                           active: focusedIndex === index,
+                          showSubMenu: child.props.children
+                              ? child.props.showSubMenu
+                              : null,
                           ref: (node) => {
                               const role = node?.getAttribute('role')
                               if (
diff --git a/components/popper/src/popper.js b/components/popper/src/popper.js
index 453e3a067f..308b425c62 100644
--- a/components/popper/src/popper.js
+++ b/components/popper/src/popper.js
@@ -16,6 +16,7 @@ const flipPlacement = (placement) => {
 }
 
 const Popper = ({
+    id,
     children,
     className,
     dataTest,
@@ -51,6 +52,7 @@ const Popper = ({
 
     return (
         <div
+            id={id}
             className={className}
             data-test={dataTest}
             ref={setPopperElement}
@@ -74,6 +76,7 @@ Popper.propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     dataTest: PropTypes.string,
+    id: PropTypes.string,
     /** A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/) */
     modifiers: PropTypes.arrayOf(
         PropTypes.shape({
diff --git a/components/popper/types/index.d.ts b/components/popper/types/index.d.ts
index 3800f31096..de2ae9c813 100644
--- a/components/popper/types/index.d.ts
+++ b/components/popper/types/index.d.ts
@@ -6,6 +6,7 @@ type PopperReference = VirtualElement | Element
 type ReferenceElement = PopperReference | React.RefObject<PopperReference>
 
 export interface PopperProps {
+    id?: string
     /**
      * Content inside the Popper
      */