Skip to content

Commit

Permalink
fix(HeaderMenu): re-enabled links in submenu (#5296)
Browse files Browse the repository at this point in the history 
Fixes #4641.
  • Loading branch information
@asudoh
asudoh authored Feb 11, 2020
1 parent 616b182 commit 55f44c9
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 41 deletions.
12 changes: 10 additions & 2 deletions packages/react/src/components/UIShell/HeaderMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ class HeaderMenu extends React.Component {
renderMenuContent: defaultRenderMenuContent,
};

_subMenus = React.createRef();

constructor(props) {
super(props);
this.state = {
Expand All @@ -73,7 +75,10 @@ class HeaderMenu extends React.Component {
* Toggle the expanded state of the menu on click.
*/
handleOnClick = e => {
e.preventDefault();
const { current: subMenusNode } = this._subMenus;
if (!subMenusNode || !subMenusNode.contains(e.target)) {
e.preventDefault();
}

this.setState(prevState => ({
expanded: !prevState.expanded,
Expand Down Expand Up @@ -198,7 +203,10 @@ class HeaderMenu extends React.Component {
{menuLinkName}
<MenuContent />
</a>
<ul {...accessibilityLabel} className={`${prefix}--header__menu`}>
<ul
{...accessibilityLabel}
ref={this._subMenus}
className={`${prefix}--header__menu`}>
{React.Children.map(children, this._renderMenuItem)}
</ul>
</li>
Expand Down
51 changes: 12 additions & 39 deletions packages/react/src/components/UIShell/UIShell-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,19 +182,10 @@ storiesOf('UI Shell', module)
isPersistent={false}>
<SideNavItems>
<HeaderSideNavItems>
<HeaderMenuItem linkRole="link" href="#">
Link 1
</HeaderMenuItem>
<HeaderMenuItem linkRole="link" href="#">
Link 2
</HeaderMenuItem>
<HeaderMenuItem linkRole="link" href="#">
Link 3
</HeaderMenuItem>
<HeaderMenu
linkRole="link"
aria-label="Link 4"
menuLinkName="Link 4">
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
Expand Down Expand Up @@ -315,19 +306,10 @@ storiesOf('UI Shell', module)
isPersistent={false}>
<SideNavItems>
<HeaderSideNavItems>
<HeaderMenuItem linkRole="link" href="#">
Link 1
</HeaderMenuItem>
<HeaderMenuItem linkRole="link" href="#">
Link 2
</HeaderMenuItem>
<HeaderMenuItem linkRole="link" href="#">
Link 3
</HeaderMenuItem>
<HeaderMenu
linkRole="link"
aria-label="Link 4"
menuLinkName="Link 4">
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
Expand Down Expand Up @@ -389,19 +371,10 @@ storiesOf('UI Shell', module)
expanded={isSideNavExpanded}>
<SideNavItems>
<HeaderSideNavItems hasDivider={true}>
<HeaderMenuItem linkRole="link" href="#">
Link 1
</HeaderMenuItem>
<HeaderMenuItem linkRole="link" href="#">
Link 2
</HeaderMenuItem>
<HeaderMenuItem linkRole="link" href="#">
Link 3
</HeaderMenuItem>
<HeaderMenu
linkRole="link"
aria-label="Link 4"
menuLinkName="Link 4">
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
<HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
Expand Down

0 comments on commit 55f44c9

Please sign in to comment.