Clicking an unfocusable element inside of the menu closes it

If there is any space between or around the menu items, clicking it will result in the menu closing. Also, clicking anything inside of the menu (such as a decorative arrow) will also close the menu.

This is because of this logic. When a menu item is blurred, the menu will close unless there is a newly focused element inside of the menu.

https://github.com/davidtheclark/react-aria-menubutton/blob/master/src/createManager.js#L106

function handleBlur() {
  const self = this;
  self.blurTimer = setTimeout(function() {
    const buttonNode = ReactDOM.findDOMNode(self.button);
    const menuNode = ReactDOM.findDOMNode(self.menu);
    const activeEl = buttonNode.ownerDocument.activeElement;
    if (buttonNode && activeEl === buttonNode) return;
    if (menuNode && menuNode.contains(activeEl)) return;
    if (self.isOpen) self.closeMenu({ focusButton: false });
  }, 0);
}

One solution is to listen for click events on document in createManager.js, and save a reference to the target as lastClickedElement. Then inside of this blur handler, we could check if the lastClickedElement is inside of the menu.

[gouegd]

Another problem to consider in this issue: where does focus go when you click inside the menu but not on an item? To the menu itself?

Tentative answer: it goes back where is was, unless the newly focused item is an input/select/textarea. That would allow having a text input to filter the visible items, on top of the items list, in the menu.

[taylorcode]

I will PR this change, thank you!