fix(MenuItem): make spacebar not scroll the page, fix submenu not closing

CHANGELOG.md

@@ -35,6 +35,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix switching modes in `Dropdown` @layershifter ([#1830](https://github.com/stardust-ui/react/pull/1830))
 - Fix a runtime error if context is missing @layershifter ([#1837](https://github.com/stardust-ui/react/pull/1837))
 - Fix RTL mode in `Dialog` @lucivpav ([#1828](https://github.com/stardust-ui/react/pull/1828))
+- Do not scroll the page when spacebar is pressed on focused `MenuItem`, fix submenu not closing @lucivpav ([#1735](https://github.com/stardust-ui/react/pull/1735))
 
 ### Features
 - Add `overwrite` prop to `Provider` @layershifter ([#1780](https://github.com/stardust-ui/react/pull/1780))

packages/react/src/components/Menu/MenuItem.tsx

@@ -314,6 +314,7 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
     doNotNavigateNextParentItem: event => {
       event.stopPropagation()
     },
+    closeAllMenus: event => this.closeAllMenus(event),
   }
 
   outsideClickHandler = e => {
@@ -379,10 +380,15 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
     }
     const { inSubmenu } = this.props
     this.trySetMenuOpen(false, e, () => {
-      if (!inSubmenu && this.props.vertical) {
+      if (!inSubmenu) {
         focusAsync(this.itemRef.current)
       }
     })
+
+    // avoid spacebar scrolling the page
+    if (!inSubmenu) {
+      e.preventDefault()
+    }
   }
 
   closeMenu = (e: Event, forceTriggerFocus?: boolean) => {

packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts

@@ -49,6 +49,9 @@ const menuItemBehavior: Accessibility<MenuItemBehaviorProps> = props => ({
       },
     },
     wrapper: {
+      closeAllMenus: {
+        keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
+      },
       closeAllMenusAndFocusNextParentItem: {
         keyCombinations: [{ keyCode: keyboardKey.ArrowRight }],
       },

packages/react/test/specs/components/Menu/Menu-test.tsx

@@ -13,6 +13,7 @@ import {
 } from 'src/lib/accessibility'
 import { AccessibilityDefinition } from 'src/lib/accessibility/types'
 import { ReactWrapper } from 'enzyme'
+import * as keyboardKey from 'keyboard-key'
 
 const menuImplementsCollectionShorthandProp = implementsCollectionShorthandProp(Menu)
 
@@ -25,6 +26,16 @@ describe('Menu', () => {
     { key: 'users', content: 'users', 'data-foo': 'something' },
   ]
 
+  const getNestedItems = () => [
+    { key: 'home', content: 'home', onClick: jest.fn(), 'data-foo': 'something' },
+    {
+      key: 'users',
+      content: 'users',
+      'data-foo': 'something',
+      menu: [{ key: '1', content: 'Alice' }, { key: '2', content: 'Bob' }],
+    },
+  ]
+
   describe('items', () => {
     it('renders children', () => {
       const menuItems = mountWithProvider(<Menu items={getItems()} />).find('MenuItem')
@@ -66,6 +77,25 @@ describe('Menu', () => {
       expect(menuItems.everyWhere(item => item.prop('data-foo') === 'something')).toBe(true)
     })
 
+    it('closes menu when item is clicked using spacebar', () => {
+      const menu = mountWithProvider(<Menu items={getNestedItems()} />)
+      const menuItems = menu.find('MenuItem')
+
+      menuItems
+        .at(1)
+        .find('a')
+        .first()
+        .simulate('keydown', { keyCode: keyboardKey.Spacebar })
+      menuItems
+        .at(1)
+        .at(0)
+        .find('a')
+        .first()
+        .simulate('keydown', { keyCode: keyboardKey.Spacebar })
+
+      expect(menuItems.at(1).state('menuOpen')).toBe(false)
+    })
+
     describe('activeIndex', () => {
       it('should not be set by default', () => {
         const menuItems = mountWithProvider(<Menu items={getItems()} />).find('MenuItem')