Skip to content

fix: make spreadsheet overlays native popover, per instance (#9303) (CP: 25.2)#9495

Merged
DiegoCardoso merged 1 commit into
25.2from
cherry-pick-9303-to-25.2-1781177296100
Jun 11, 2026
Merged

fix: make spreadsheet overlays native popover, per instance (#9303) (CP: 25.2)#9495
DiegoCardoso merged 1 commit into
25.2from
cherry-pick-9303-to-25.2-1781177296100

Conversation

@vaadin-bot

Copy link
Copy Markdown
Collaborator

This PR cherry-picks changes from the original PR #9303 to branch 25.2.

Original PR description

The spreadsheet attaches a <div id="spreadsheet-overlays"> to host its overlay widgets (context menu, tooltips, comment overlays, popup buttons). It has historically lived in <body> to escape clipping by ancestor overflow/transform rules and as a singleton shared by all spreadsheet instances on the page. Switching the overlays to native popover changes the picture: every overlay enters the top layer regardless of DOM position, so neither the body-attachment nor the singleton are load-bearing anymore.

This PR includes the native popover changes proposed in #9270 and adds the structural changes that the popover approach enables:

  • the container moves into the <vaadin-spreadsheet> light DOM, projected into the shadow root via a new overlays slot, with one container per instance;
  • the reference is threaded from JS into the GWT widget chain instead of being looked up by id;
  • SpreadsheetConnector — not ApplicationConnection — now owns the SpreadsheetContextMenu.

Tooltips and the cell-comment overlay are created in SheetWidget's constructor (before the host is known), so the container is wired in via a setter rather than a constructor argument.

A side benefit: spreadsheet overlays inside a modal Dialog are interactive again. The modal sets body { pointer-events: none } to disable everything outside the dialog overlay; with the container now inside the dialog's slotted content, the overlays inherit pointer-events: auto from the dialog's overlay part instead of pointer-events: none from <body>.

Intended to replace #9270.

Related to #9270


🤖 Generated with Claude Code

The spreadsheet attaches a `<div id="spreadsheet-overlays">` to host its
overlay widgets (context menu, tooltips, comment overlays, popup
buttons). It has historically lived in `<body>` to escape clipping by
ancestor `overflow`/`transform` rules and as a singleton shared by all
spreadsheet instances on the page. Switching the overlays to native
popover changes the picture: every overlay enters the top layer
regardless of DOM position, so neither the body-attachment nor the
singleton are load-bearing anymore.

This PR includes the native popover changes proposed in #9270 and adds
the structural changes that the popover approach enables:

- the container moves into the `<vaadin-spreadsheet>` light DOM,
projected into the shadow root via a new `overlays` slot, with one
container per instance;
- the reference is threaded from JS into the GWT widget chain instead of
being looked up by id;
- `SpreadsheetConnector` — not `ApplicationConnection` — now owns the
`SpreadsheetContextMenu`.

Tooltips and the cell-comment overlay are created in `SheetWidget`'s
constructor (before the host is known), so the container is wired in via
a setter rather than a constructor argument.

A side benefit: spreadsheet overlays inside a modal `Dialog` are
interactive again. The modal sets `body { pointer-events: none }` to
disable everything outside the dialog overlay; with the container now
inside the dialog's slotted content, the overlays inherit
`pointer-events: auto` from the dialog's overlay part instead of
`pointer-events: none` from `<body>`.

Intended to replace #9270.

Related to #9270

---

🤖 Generated with Claude Code

---------

Co-authored-by: Tatu Lund <tatu@vaadin.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

@DiegoCardoso
DiegoCardoso enabled auto-merge (squash) June 11, 2026 11:46
@DiegoCardoso
DiegoCardoso merged commit e724ebe into 25.2 Jun 11, 2026
16 checks passed
@DiegoCardoso
DiegoCardoso deleted the cherry-pick-9303-to-25.2-1781177296100 branch June 11, 2026 11:46
@vaadin-bot

Copy link
Copy Markdown
Collaborator Author

This ticket/PR has been released with Vaadin 25.2.0-beta2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants