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!
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 thehideOnClickoption, but that is limited (either completely off, on, or "toggle"). I'd like thehideOnClickin the general case, but I want to prevent the hide when theevent.targetis within the date/time picker.I can't use
onHideand returnfalsebecause I don't have access to the click event inonHide, which means I can't detect where the click happens.Solution
Prevent the tippy from closing if
onClickOutsidereturnsfalse, similar toonHide.Or, maybe check for
event.defaultPreventedand if it's true, don't hide the tippy.I worked around this by setting
hideOnClicktofalseand 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!