fix(Toolbar): close menu when it looses focus

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))

packages/react/src/components/Toolbar/ToolbarItem.tsx

@@ -253,6 +253,7 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>, ToolbarItemS
                 {submenu}
               </>
             ),
+            onBlur: this.handleWrapperBlur,
           }),
         })
       }
@@ -268,6 +269,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 })
 

packages/react/src/lib/accessibility/Behaviors/Toolbar/toolbarItemBehavior.ts

@@ -22,7 +22,10 @@ const toolbarItemBehavior: Accessibility<ToolbarItemBehaviorProps> = props => {
   behaviorData.keyActions.wrapper = {
     ...behaviorData.keyActions.wrapper,
     closeMenuAndFocusTrigger: {
-      keyCombinations: props.menu && props.menuOpen ? [{ keyCode: keyboardKey.Escape }] : null,
+      keyCombinations:
+        props.menu && props.menuOpen
+          ? [{ keyCode: keyboardKey.Escape }, { keyCode: keyboardKey.Tab, shiftKey: true }]
+          : null,
     },
     doNotNavigateNextToolbarItem: {
       keyCombinations: