fix: do not hijack input when inside a menu (#1551)

dhis2 · Jul 4, 2024 · 7a27d3d · 7a27d3d
1 parent 975764f
commit 7a27d3d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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: