Dropdown - Can't trigger links - events are prevented

[nicholaai]

Hi, first off, love the project and thanks for the contribution to the community.

Currently, <Dropdown /> is built using <Details />. When trying to use the component with an a tag I run into an issue. Here's my example code:

<Dropdown title="Dropdown">
  <Dropdown.Menu direction='sw'>
    <Dropdown.Item>
      <a href="http://www.github.com" target="_blank">Github</a>
    </Dropdown.Item>
    <Dropdown.Item>
      <button onClick={() => console.log('hi')}>Hi</button>
    </Dropdown.Item>
    <Dropdown.Item>Item 3</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

<buton> works as expected. When I click or use the space bar when button is focused, my event fires and hi is logged to the console.

However, the a tag does not work as expected. When I try to click on or use enter to trigger a click, the menu list gets dismissed and doesn't trigger the link event.

I did some investigation and found the following method in Details.js lines 38-42:

function closeMenu(event) {
    if (event) event.preventDefault()
    setOpen(false)
    document.removeEventListener('click', closeMenu)
  }

The event.preventDefault() is preventing the link event to fire. Is this intentional? I think might need to be removed so we can use links within the Dropdown component.

If you guys agree, I'll make a PR with the appropriate changes. Thanks!