enhancement
major
defect
major
minor
minor
#29736
Click-region menu opens flush on the window edge and under the trigger's tooltip
Found in BOS/Consulting #400 (8.0.0-alpha9) on the user menu at the right end of the app bar; it applies to every <menu> whose trigger is near the right edge.
Measured at 1440 x 900, app bar with 16px right padding, avatar trigger 1380-1424:
- No gutter on the right. TLMenuRegion (click mode) opens the menu with anchorX = trigger.left, anchorY = trigger.bottom. The menu then clamps with left = innerWidth - offsetWidth, so the menu (314px) spans 1126-1440.4: it touches the window edge and, by the sub-pixel part of its width, overhangs it. A menu opened through anchorId instead right-aligns to the trigger (left = rect.right - width), which is what the user menu wants: right edge 1424, under the avatar.
- No gap below the trigger. The coordinates path uses trigger.bottom, the anchorId path rect.bottom + 4. The click-region menu therefore starts on the trigger's bottom edge, 4px into a 52px app bar.
- The trigger's tooltip covers the menu. The avatar carries data-tooltip (the account's name). The pointer is still on the avatar when the menu opens, so the tl-tooltip-popover stands on top of the menu's first entries until the pointer moves.
Proposal: let a click region open its menu anchored to its own element (the anchorId path), and hide the tooltip of a trigger while its menu is open.
Pietro works around it with CSS (.tlMenu:has(.bi-box-arrow-right) { translate: -1rem 0.25rem } and hiding .tl-tooltip-popover while that menu is open), to be removed when this is fixed.
Lösung
Punkte 1 und 2 sind auf master bereits durch #29617 behoben: Eine Click-Region öffnet ihr Menü am eigenen Element (anchorId), und das Menü wird über Floating UI (usePopover) mit Abstand --tl-space-xs unter dem Auslöser platziert. Würde es rechts aus dem Fenster ragen, richtet flip() es rechtsbündig am Auslöser aus (bottom-end); shift() hält zusätzlich einen Rand zum Fensterrand. Gemessen bei 1440 x 900 im React-Demo: Auslöser rechts 1424 / unten 45, Menü rechts 1423,8 / oben 53.
Punkt 3: Ein Druck (pointerdown, dokumentweit) schließt im Tooltip-Manager (tooltip-host.ts) einen angezeigten Tooltip sofort und bricht einen noch verzögerten ab. Der Tooltip des gedrückten Elements bleibt unterdrückt, bis der Zeiger das Element verlassen hat und wieder darüber kommt. Ein Druck in einen interaktiven Tooltip lässt ihn offen. Das gilt für jeden Auslöser (Menüs, Dropdowns, Popup-Buttons), ohne dass der Auslöser selbst etwas tun muss.
Der CSS-Workaround in BOS/Consulting kann danach entfallen.