From 7a27d3df5e4812ee01a3c2a9b1d69a3bab1ce96e Mon Sep 17 00:00:00 2001
From: Mozafar <mozafar@dhis2.org>
Date: Thu, 4 Jul 2024 11:24:40 +0100
Subject: [PATCH] fix: do not hijack input when inside a menu (#1551)

---
 .../menu/src/menu/__tests__/menu.test.js      | 21 +++++++++++++++++++
 components/menu/src/menu/use-menu.js          |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/components/menu/src/menu/__tests__/menu.test.js b/components/menu/src/menu/__tests__/menu.test.js
index 585a1f2821..835733541d 100644
--- a/components/menu/src/menu/__tests__/menu.test.js
+++ b/components/menu/src/menu/__tests__/menu.test.js
@@ -1,3 +1,4 @@
+import { Input } from '@dhis2-ui/input'
 import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { mount } from 'enzyme'
@@ -180,4 +181,24 @@ describe('Menu Component', () => {
         // non menu items do not receive focus
         expect(plainListItem.parentElement).not.toHaveFocus()
     })
+
+    it('does not hijack input change value if space entered [bug]', () => {
+        const onChange = jest.fn()
+        const { getByPlaceholderText } = render(
+            <Menu dataTest={menuDataTest} dense={false}>
+                <MenuItem value="myValue" label="Click menu item" />
+                <Input onChange={onChange} placeholder="test"></Input>
+            </Menu>
+        )
+
+        const inputField = getByPlaceholderText('test')
+        inputField.focus()
+        userEvent.keyboard('t')
+        userEvent.keyboard('e')
+        userEvent.keyboard(' ')
+        userEvent.keyboard('st')
+
+        expect(inputField.value).toBe('te st')
+        expect(onChange).toHaveBeenCalled()
+    })
 })
diff --git a/components/menu/src/menu/use-menu.js b/components/menu/src/menu/use-menu.js
index e3a88f8d85..5bdf3d394c 100644
--- a/components/menu/src/menu/use-menu.js
+++ b/components/menu/src/menu/use-menu.js
@@ -52,9 +52,9 @@ export const useMenuNavigation = (children) => {
                         break
                     case 'Enter':
                     case ' ':
-                        event.preventDefault()
                         if (event.target.nodeName === 'LI') {
-                            event.target.children[0].click()
+                            event.preventDefault()
+                            event.target.children?.[0]?.click()
                         }
                         break
                     default: