Allow onClickOutside to conditionally not hide the tippy

[laymonage]

Problem

I'm using tippy to build a "drilldown" (multi-level popup) component for applying filters in a listing page. One of the filters is a date/time filter, and we use a separate library to render the date/time picker, which is also a popup element. When interacting with the date/time picker, tippy considers it to be "outside" clicks, because the picker is rendered outside of the tippy (in the body element).

While it is possible to configure my date/time picker to be rendered within the tippy, this would constrain the picker to be within the tippy's container, which is not desirable in my use case.

I would like to have a way to prevent the tippy from closing when clicking outside on certain conditions based on the event. I know there's the hideOnClick option, but that is limited (either completely off, on, or "toggle"). I'd like the hideOnClick in the general case, but I want to prevent the hide when the event.target is within the date/time picker.

I can't use onHide and return false because I don't have access to the click event in onHide, which means I can't detect where the click happens.

Solution

Prevent the tippy from closing if onClickOutside returns false, similar to onHide.

Or, maybe check for event.defaultPrevented and if it's true, don't hide the tippy.

---

I worked around this by setting hideOnClick to false and implementing my own click away handler as a plugin, but I think it'd be really nice if Tippy provides this option as built-in.

Happy to make a PR if this sounds like a good idea!