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:
Mohamed Boudra
2026-11-10 11:05:35 +07:00
committed by GitHub
parent abcccce846
commit d46ee6558c
5 changed files with 192 additions and 84 deletions
+7
View File
@@ -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.