fix(Toolbar): ToolbarMenuItem doesn't focus menu trigger element after 'onClick' was executed

CHANGELOG.md

@@ -39,6 +39,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `loader` - adding labeling when loader get focus @kolaps33 ([#2352](https://github.com/microsoft/fluent-ui-react/pull/2352))
 - `setWhatInputSource()` changes DOM attribute in `whatInput` @layershifter ([#2359](https://github.com/microsoft/fluent-ui-react/pull/2359))
 - Styles from `Provider` are applied to components that rendered out of it in DOM @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Fix `Toolbar` - ToolbarMenuItem doesn't focus menu trigger element after 'onClick' was executed ([#2367](https://github.com/microsoft/fluent-ui-react/pull/2367)) 
 
 ### Features
 - Added sourcemaps to the dist output to simplify debugging @miroslavstastny ([#2329](https://github.com/microsoft/fluent-ui-react/pull/2329))

docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx

@@ -9,6 +9,7 @@ const doList = [
     `aria-labelledby` props). Refer to{' '}
     {link('toolbar(role)', 'https://www.w3.org/WAI/PF/aria/roles#toolbar')} for details.
   </Text>,
+  'If `Toolbar` contains menu, the menu closes after clicking on one of the menu items. To prevent losing focus, move it manually in the `onClick` handler.',
 ]
 
 const ToolbarBestPractices: React.FunctionComponent<{}> = () => {

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

@@ -190,9 +190,6 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
       }
       // TODO: should we pass toolbarMenuItem to the user callback so he can decide if he wants to close the menu?
       this.trySetMenuOpen(menuOpen, e)
-      if (!menuOpen) {
-        _.invoke(this.itemRef.current, 'focus')
-      }
     },
     variables: mergeComponentVariables(variables, predefinedProps.variables),
   })
@@ -322,7 +319,6 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
     if (menu) {
       if (doesNodeContainClick(this.menuRef.current, e, this.context.target)) {
         this.trySetMenuOpen(false, e)
-        _.invoke(this.itemRef.current, 'focus')
       }
     }
   }