diff --git a/CHANGELOG.md b/CHANGELOG.md index aa78533758..0f4467e608 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx b/docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx index 3478cc2d89..6256914f32 100644 --- a/docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx +++ b/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. , + '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<{}> = () => { diff --git a/packages/react/src/components/Toolbar/ToolbarItem.tsx b/packages/react/src/components/Toolbar/ToolbarItem.tsx index f6e350de54..c821b7e566 100644 --- a/packages/react/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react/src/components/Toolbar/ToolbarItem.tsx @@ -190,9 +190,6 @@ class ToolbarItem extends UIComponent> { } // 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> { if (menu) { if (doesNodeContainClick(this.menuRef.current, e, this.context.target)) { this.trySetMenuOpen(false, e) - _.invoke(this.itemRef.current, 'focus') } } }