fix: make spreadsheet overlays native popover, per instance#9303
Open
DiegoCardoso wants to merge 3 commits into
Open
fix: make spreadsheet overlays native popover, per instance#9303DiegoCardoso wants to merge 3 commits into
DiegoCardoso wants to merge 3 commits into
Conversation
Fixes #9240 Note1: Spreadsheet tabs initial alignment is wrong if the first tab is not the selected one when Spreadsheet is placed on Dialog. This is not regression from this PR, but a different bug that needs to be addressed separately. Note2: When Spreadsheet is in Dialog, inserting comment does not work. This is not regression from this PR, as inserting comment after this PR still works, when Spreadsheet is not in Dialog. This is different bug that needs to be address separately. - Actually these bugs happen also with Vaadin 24.10, so they are not regressions from Dialog's native popover refactor.
The overlay container was a global singleton attached to <body>, originally because spreadsheet overlays needed to escape clipping by ancestor elements. With native popover (#9241) overlays render in the top layer regardless of DOM position, so body-attachment is no longer required. Move the container into the <vaadin-spreadsheet> light DOM (one per instance, projected via a new "overlays" slot). Pass the container reference through the JS→GWT chain instead of looking it up by id, and let SpreadsheetConnector — not ApplicationConnection — own the SpreadsheetContextMenu. As a side effect, spreadsheet overlays inside a modal Dialog are now interactive — they inherit pointer-events: auto from the dialog's overlay part instead of pointer-events: none from <body>. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
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 ancestoroverflow/transformrules 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:
<vaadin-spreadsheet>light DOM, projected into the shadow root via a newoverlaysslot, with one container per instance;SpreadsheetConnector— notApplicationConnection— now owns theSpreadsheetContextMenu.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
Dialogare interactive again. The modal setsbody { pointer-events: none }to disable everything outside the dialog overlay; with the container now inside the dialog's slotted content, the overlays inheritpointer-events: autofrom the dialog's overlay part instead ofpointer-events: nonefrom<body>.Intended to replace #9270.
Related to #9270
🤖 Generated with Claude Code