Best way to close custom dialog?

Flow
1

Hi, everyone.
I’m create a custom dialog by using Composite"<Div>";

I don’t understand how to remove my dialog from ui? Now I’m set css style like (“display”,“none”). It’s works, but my dialog stay in the DOM.

My question is, how to full remove my dialog from UI? Something like - getUI.remove …

Custom dialog:

.......
 public void open() {
        this.setOpened(true);
    }

    public void close() {
        this.setOpened(false);
    }

    public void setOpened(boolean opened) {
        UI ui = UI.getCurrent();

        if(opened && this.getElement().getNode().getParent() == null && ui != null){
            ui.beforeClientResponse(ui, (context) -> {
                ui.add(new Component[]{this});

            });
        }else{
            Style style = this.getElement().getStyle();
            style.set("display","none");
        }

    }
......

Main code:

......
CustomDialog d = new  CustomDialog();
 d.open();
......
2

Hi there,

I see that you grabbed some of the logic from the Dialog class. Are you using a webcomponent on the client end? I’m asking because the way the Dialog works in Vaadin is by listening to a opened-changed event from the client, and then removing it from the UI: https://github.com/vaadin/vaadin-dialog-flow/blob/d5036caca14ebc7c7c42e22bac2128b15462a047/src/main/java/com/vaadin/flow/component/dialog/Dialog.java#L67-L72

If you don’t have that event, or want to remove it without using the event, you can do this:

public void setOpened(boolean opened) {
		setVisible(opened);
		
        UI ui = UI.getCurrent();

        if(opened && this.getElement().getNode().getParent() == null && ui != null){
            ui.beforeClientResponse(ui, (context) -> {
				// no need to encapsulate inside another component
                ui.add(this);
            });
        } else if (!opened){
            getElement().removeFromParent();
        }
    }
3

Thanks)