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.

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

Can't close on outside click in a modeless dialog #7132

Closed
jcgueriaud1 opened this issue Feb 20, 2025 · 3 comments
Closed

Can't close on outside click in a modeless dialog #7132

jcgueriaud1 opened this issue Feb 20, 2025 · 3 comments
Assignees

Comments

@jcgueriaud1
Copy link
Contributor

Description

I created a popover in a non-modal dialog.

When I open the popover and close in the dialog to closeOnOutsideClick the popover is not closed.

It's working well if I click outside the dialog.

Expected outcome

I'm expecting the popover will close when I click on the Dialog.

Screen.Recording.2025-02-20.at.16.25.16.mov

Minimal reproducible example

package com.example.application.views.tree;

import com.example.application.views.MainLayout;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.popover.Popover;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.PreserveOnRefresh;
import com.vaadin.flow.router.Route;

@PageTitle("Dialog-popover")
@Route(value = "dialog-popover-demo", layout = MainLayout.class)
public class DialogPopoverView extends VerticalLayout {
    private Dialog dialog;
    private Button closeButton;
    private Button openButton;

    public DialogPopoverView() {
        this.dialog = new Dialog();
        dialog.setModal(false);
        closeButton = new Button("Close", e -> dialog.close());

        Button button = new Button("Open");
        TextField textField = new TextField("Name");
        Popover popover = new Popover(textField);
        popover.setCloseOnOutsideClick(true);
        popover.setTarget(button);
        add(button);
        dialog.add(button);

        openButton = new Button("Open", e -> {
            dialog.open();
        });
        dialog.add(closeButton);
        add(openButton);
    }

}

Steps to reproduce

You can see the steps in the video.

Environment

Vaadin version(s): 24.6.5
OS:

Browsers

No response

@web-padawan
Copy link
Member

This issue is basically the same as vaadin/web-components#8521 which was fixed by vaadin/web-components#8692.
I'll take care of backporting the fix to 24.6 (it required adding some new API but that was internal change).

@jcgueriaud1
Copy link
Contributor Author

It seems to be broken also in Vaadin 24.7.0.alpha11.
Is it already released in Vaadin 24.7.0.alpha11 ?

@web-padawan
Copy link
Member

No, this fix should be included in the next platform alpha to be released this week (the last one before beta).

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

No branches or pull requests

2 participants