Anchor tag in <MenuItem> doesn't work properly

I want to be able to have a MenuItem act as an external link. Example:

  constructor() {
    super();
    this.state = { isOpen: false };
  }
  render() {
    return (
      <Wrapper
        onSelection={() => {}}
        onMenuToggle={({ isOpen }) => {
          this.setState({ isOpen });
        }}
      >
        <Button>
          Example
        </Button>
        <Menu className="dropdown-menu">
          <MenuItem
            className="dropdown-item"
            tag="a"
            href="https://example.com/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Whatup
          </MenuItem>
        </Menu>
      </Wrapper>
    );
  }
}

This doesn’t work properly. Clicking the link with the mouse works fine, but selecting it with the enter key doesn’t cause the link to open. I think this package should support that. If others agree, I can make a pull request.

Browser: Google Chrome 63.0.3239.52 beta OS: Linux Mint 18.2

[marcysutton]

That’s probably because by returning you’re skipping the event.preventDefault() and allowing the link to open a URL. I’d go one step further and filter based on the target attribute in addition to tag so you don’t impact other menuitems.

I’d also add a new window icon to each item to show that URLs open in new windows so the user expects a change in context. Probably a “opens in a new window” offscreen label of some kind, as well.

[markusenglund]

Yes!