fix(Toolbar): close menu when it looses focus (#1688)

* fix(Toolbar): close menu when it looses focus * fix shift+tab * fix * Update changelog * add separate action * small improvement
microsoft · Jul 26, 2019 · 7da5268 · 7da5268
1 parent 3b21ea8
commit 7da5268
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -47,6 +47,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Remove `color` prop from `Dialog` typings @layershifter ([#1702](https://github.com/stardust-ui/react/pull/1702))
 - `Loader` uses `Text` component for `label` slot instead of `Box` @layershifter ([#1701](https://github.com/stardust-ui/react/pull/1701))
 - Fix test cut off in `Button` component @layershifter ([#1716](https://github.com/stardust-ui/react/pull/1716))
+- Close `Toolbar`'s menu when it looses focus @sophieH29 ([#1688](https://github.com/stardust-ui/react/pull/1688))
 
 ### Documentation
 - Make sidebar categories collapsible @lucivpav ([#1611](https://github.com/stardust-ui/react/pull/1611))

diff --git a/packages/react/src/components/Toolbar/ToolbarItem.tsx b/packages/react/src/components/Toolbar/ToolbarItem.tsx
@@ -159,15 +159,14 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>, ToolbarItemS
       this.handleClick(event)
     },
     closeMenuAndFocusTrigger: event => {
-      if (!this.props.menuOpen) {
-        return
-      }
-
       this.trySetMenuOpen(false, event)
       if (this.itemRef) {
         this.itemRef.current.focus()
       }
     },
+    closeMenu: () => {
+      this.trySetMenuOpen(false, event)
+    },
     doNotNavigateNextToolbarItem: event => {
       event.stopPropagation()
     },
@@ -253,6 +252,7 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>, ToolbarItemS
                 {submenu}
               </>
             ),
+            onBlur: this.handleWrapperBlur,
           }),
         })
       }
@@ -268,6 +268,12 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>, ToolbarItemS
     return <Ref innerRef={this.itemRef}>{renderedItem}</Ref>
   }
 
+  handleWrapperBlur = e => {
+    if (this.props.menu && !e.currentTarget.contains(e.relatedTarget)) {
+      this.trySetMenuOpen(false, e)
+    }
+  }
+
   handleBlur = (e: React.SyntheticEvent) => {
     this.setState({ isFromKeyboard: false })
 

diff --git a/packages/react/src/lib/accessibility/Behaviors/Toolbar/toolbarItemBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Toolbar/toolbarItemBehavior.ts
@@ -24,6 +24,10 @@ const toolbarItemBehavior: Accessibility<ToolbarItemBehaviorProps> = props => {
     closeMenuAndFocusTrigger: {
       keyCombinations: props.menu && props.menuOpen ? [{ keyCode: keyboardKey.Escape }] : null,
     },
+    closeMenu: {
+      keyCombinations:
+        props.menu && props.menuOpen ? [{ keyCode: keyboardKey.Tab, shiftKey: true }] : null,
+    },
     doNotNavigateNextToolbarItem: {
       keyCombinations:
         props.menu && props.menuOpen