[fix] Nav dropdown button not closing when clicking outside of it

[werdnanoslen]

ReactUSWDS Version & USWDS Version:

ReactUSWDS: 2.8.0 USWDS: 2.13.1

Describe the bug

Nav dropdown button doesn't close when clicking outside of it. Instead, it stays open until clicking the button again.

To Reproduce Steps to reproduce the behavior:

1. Go to the header storybook
2. Click on a nav dropdown button
3. Click outside the menu/button
4. See that the meny does not close until you click the dropdown button again

Expected behavior

It should close upon clicking anywhere else:

Device and Browser Information (please complete the following information if describing a UI bug):

• Firefox 98.0.2, Chrome 99.0.4844.83, Safari 15.3
• Mac 12.2.1

[brandonlenz]

I'm taking a look at this right now. Looks like the escape key should also close the menu, however unfocusing the button should not close the menu unless the entire nav does not contain the focused element.

[hgarfinkle]

I should note that this behavior is a function of how we've set up the component in storybook. Consumers of React-USWDS can (and in fact, must) create their own handlers for when to open and close the nav. As it is, the handler we're using in storybook is pretty simplistic. Borrowing from a conversation on Truss Slack, we have the option to

1. Leave it alone. Let consumers of react-uswds set their own open/close togglers.
2. Use the uswds-made listener
3. Write our own listener, trying to mirror the behavior of the listener above.

[kmars2022]

I'm having a similar issue with closing nav menu items. Is the intended solution to create our own togglers for opening/closing menus? I would like to use an useEffect and useRef hook to handling closing menu item when a user clicks outside an open menu item.

Did something change with uswds-made listener? The link doesn't work.