Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect PopOver closing behavior #832

Closed
henryB99 opened this issue Dec 29, 2023 · 0 comments · Fixed by #833
Closed

Incorrect PopOver closing behavior #832

henryB99 opened this issue Dec 29, 2023 · 0 comments · Fixed by #833
Assignees
@henryB99
Labels
bug Something isn't working headless All about headless components and foundations

Comments

@henryB99
Copy link
Collaborator

henryB99 commented Dec 29, 2023 •
edited
Loading

Describe the bug
The headless PopOver closes even when the click comes from inside the PopOverPanel or a nested floating element.

To Reproduce
This is the code I tested with:

popOver(id = "outer") {
    popOverButton { +"Open" }
    popOverPanel {
        +"Outer"
        popOver(id = "inner") {
            popOverButton { +"Open" }
            popOverPanel {
                +"Inner"
            }
        }
    }
}

When the inner pop-over is opened, the outer one closes again. The pop-overs also close when the panels are clicked, or when trying to select an item from the ListBox dropdown-menu.

Expected behavior
The PopOver should only close when it is dismissed, i.e. when the user presses ESC oder clicks outside the PopOverPanel.

Additional context
This issue arises from the fact that we use portalling for overlay elements, like PopOver or SelectMenu. Most of these use PopUpPanel to render the pop-up, which uses the behavior provided by the OpenCloses closeOnBlur() function. Its implementation currently does not work for nested portals, since they are rendered outside the main layout directly under the <body>. The function uses Event.composedPath() to check whether the event originated from inside the portal or not. This is not enough, because the composed path is sometimes empty, even though the event source is inside the portal.
@henryB99 henryB99 changed the title Nested p Incorrect PopOver closing behavior Dec 29, 2023
@henryB99 henryB99 self-assigned this Dec 29, 2023
@henryB99 henryB99 added bug Something isn't working headless All about headless components and foundations labels Dec 29, 2023
@henryB99 henryB99 linked a pull request Dec 29, 2023 that will close this issue
Fix nested Portals #833
Merged
@henryB99 henryB99 mentioned this issue Dec 29, 2023
Merged
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@henryB99 henryB99

Labels
bug Something isn't working headless All about headless components and foundations
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix nested Portals jwstegemann/fritz2
1 participant
@henryB99