You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
The text was updated successfully, but these errors were encountered:
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 thehideOnClick
option, but that is limited (either completely off, on, or "toggle"). I'd like thehideOnClick
in the general case, but I want to prevent the hide when theevent.target
is within the date/time picker.I can't use
onHide
and returnfalse
because 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
onClickOutside
returnsfalse
, similar toonHide
.Or, maybe check for
event.defaultPrevented
and if it's true, don't hide the tippy.I worked around this by setting
hideOnClick
tofalse
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!
The text was updated successfully, but these errors were encountered: