[detachable] Add ability to flip popover element #168
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Attempted to fix the last part of detachable where we can 'flip' an element if it's not visible on the page. Similar to how floating-ui's flip middleware works.
Changes made:
allowFlip
prop which hides this behavior if you don't want it. Defaults totrue
resize
andscroll
events for the page to re-calculate if a flip needs to occur.detachable
w-tooltip
andw-menu
's props extend this interface as they directly utilize the mixinmenu
prop ofw-confirm
now utilizes the types fromw-menu
menuProps
prop ofw-select
now utilizes the types fromw-menu
Example
Here is an example of how that looks from the documentation:


Before the flip:
After the flip:
The pink line is the bottom of my browser window. Since there's no room for the menu it's "flipped" to be displayed on the top. A similar process will take place with flipping left and right aligned items.
Future refinements
middleware
that floating UI implements that we may want to consider adding as well, the shift middleware which will move the element to stay in view even if the activator element is not in viewflip
middleware such as restricting flipping across various axesFinal Thoughts
Overall this is just 1 step in trying to have a better overall popover experience without including an external library. But I think that it's a good step in the right direction. Looking forward to see what @antoniandre thinks.