Popover closes when mouse is dragged outside layer

Reported by Roman and Andreas. When a popover is open and the user clicks inside the popover, then drags the cursor outside it (for example to select text in a form), the popover closes (because react-laag interprets this as an 'outside click' and this component enables closeOnOutsideClick by default).

There is effectively no distinction between 'click outside' (where we expect it to close) and 'click inside but drag outside' (where we expect it not to close).

See this story to reproduce:

Screenshot_2021-01-08_at_11.26.45

Observations

  • the behaviour is different between Chrome and Firefox for the Input example in the story (when selecting text in from the input and then dragging cursor outside popover, the popover closes in Chrome but not Firefox).

Workarorunds

We can set the closeOnOutsideClick prop to false if we provide a close button/icon in that popover variant.

Edited by Mark Macdonald