Dropover / Popover does not close on outside click without focus

[joshuatf]

Describe the bug If the Dropdown component (which uses Popover) does not receive focus, clicking outside will not close the popover.

This is problematic when we do not want to focus the contents of the dropdown immediately.

To reproduce Steps to reproduce the behavior:

1. Create a dropdown with a toggle that's an input box.

<Dropdown
    focusOnMount={ false }
    renderToggle={ ( { isOpen, onToggle } ) => (
        <input type="text" />
    ) }
    renderContent={ ( { onToggle } ) => (
        <div>Dropdown content</div>
    ) }
/>

2. Click on the toggle area (input).
3. Click outside the dropdown.
4. Note that the popover is not closed.
5. Click on the popover area and click outside again.
6. Note that the popover is now closed.

Expected behavior Expected the popover or dropdown to still close without receiving focus first.

Screenshots

[tellthemachines]

This happens because the component that checks for focus/click outside uses the blur event to trigger closure of the dropdown, so if it's never focused, it won't know that a click is happening outside of it. This is the intended behaviour of the component, so in that sense, it isn't a bug.

You could perhaps look into using the Popover component instead of the Dropdown, as that allows you to customise the onFocusOutside handler so you may be able to achieve the intended functionality that way. The Block Toolbar is an example of a component leveraging Popover for some pretty custom focus behaviour.

One thing is puzzling me though. With the example above, the dropdown will close if the user clicks the input field again. Is that the intended outcome? It seems weird to have an input serve as a toggle.

Another thing to consider in this example is how to access the dropdown with keyboard navigation. You'll need a custom handler for it, as the popover content doesn't usually come straight after the toggle in the DOM order.