mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-10 10:25:03 +00:00
Keep popovers above their trigger off it when their content grows (#9247)
* fix(app): keep popovers above their trigger off it when content grows Tooltips and menu popovers placed above their trigger were positioned by their top edge. When their content grew after they painted, the new height painted first at the old top, extending down over the trigger, and the correction waited for onLayout and a second placement commit. Native delivers those after the frame, so the grown card covered the trigger for about 150 ms on Android; web commits both in one task and hid it. A surface above its trigger is now held by its bottom edge: it sits on the bottom of a holder that ends at that edge, so layout keeps the edge in place however the content changes. * fix(app): let presses outside a popover reach its backdrop on web The holder that keeps a popover's edge in place set pointerEvents "box-none" as an inline style. react-native-web only polyfills box-none for compiled styles, so the browser received an invalid value, fell back to auto, and the full-width holder swallowed clicks meant for the menu backdrop. Clicking outside an open menu no longer closed it. Set box-none through the pointerEvents prop, as the rest of the app does.
This commit is contained in:
@@ -446,6 +446,13 @@ Before you write a new one, ask:
|
||||
positioning (`bottom: windowHeight - anchor.y + gap`) and skip the
|
||||
`contentSize` round-trip entirely. **But only if the height is genuinely
|
||||
bounded**. Verify before you commit.
|
||||
6. **Can the content change size after the panel paints, and does the panel
|
||||
sit above its anchor?** Hold it by its bottom edge with `holdSurfaceEdge`
|
||||
and `surfaceFrameStyles` from `components/ui/anchor.ts`. Native delivers
|
||||
`onLayout` after the frame that shows the new size, so a panel placed by
|
||||
`top` paints over its anchor until the next placement lands, about 150 ms
|
||||
on Android. Web hides this because React commits the resize and the
|
||||
re-placement in one task.
|
||||
|
||||
Then copy the closest canonical file and trim.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user