Select: need a way to disable the `hide` modifier from popper
Closed this issue · 7 comments
We rely on popper's hide
modifier to hide the popover when the reference element leaves the viewport.
There needs to be a way to disable this modifier either through popperOptions
or through scoped styling.
Currently if a className
is passed to Select
, it gets applied on the select button. If popoverProps.className
is passed, it gets applied on the menu. There is no way to target the tippy.
This was needed to work around a bug with App UI's modeless dialog. See sandboxes where this bug is found in the select inside the "modeless dialog":
https://www.itwinjs.org/sandboxes/MuthuKalamani/UIControlsInDialogBox
https://www.itwinjs.org/sandboxes/NancyMcCall/Override%20Dialog%20z-index
For more context: the data-reference-hidden
attribute is being applied incorrectly because the modeless dialog sets width: 0; height: 0
to hide the backdrop.
Ideal solution would be to improve the backdrop logic/styles in App UI, but I think it also makes sense for iTwinUI to offer a way to disable this hide
plugin.
- I might have understood issue incorrectly, but if this issue is looking for a way to hide a tippy, I think we can call
instance.hide()
(docs). Here instance is the variable storing the tippy instance.
- We can also hide all the tippys on the page (docs)
- We could also pass a prop to tippy to
hideOnClick
(docs)
- Then there are also props for callbacks for
onHidden
("once the tippy has been fully hidden and unmounted from the DOM") andonHide
("once the tippy begins to hide") (docs)
In the onHide
prop,
You can optionally return false from this lifecycle to cancel a hide based on a condition.
- We can also use plugins to maintain a state by ourselves docs | (docs example)
The plugin's function fn returns an object of lifecycle hooks. Plugins are invoked per-instance and the plugin function definition takes the instance as an argument, so you can use private variables to create internal state in the plugin closure.
- Using plugins, we can also hide on our own events, like
hideOnEscape
docs
None of those are really what we need, except maybe the custom plugins.
What I'm talking about is popper's hide
modifier (I have a link in the issue description) which basically does this: when the reference element (the select button) is scrolled out of the viewport, it hides the popover (the select menu).
And we need a way to disable this feature because it doesn't work in modeless dialog.
One option might be to use headless tippy and filter out the data-reference-hidden
attribute based on a new prop. But I think this would require handling some of the other logic ourselves, so we would need to test it.
From what I have searched, I don't think there is an easy way to disable popper's hide
mechanism. Playing with the onHide()
function callback to return false didn't work. As you suggested, one way is to handle the logic of when to add the data-reference-hidden
attribute ourselves, but that involves work on our side. I will try one last time to find a way in the popper and tippy docs to disable this and update it here, but this is what I have tried so far.
Closing this as we want to get rid of tippy.js completely.