no straightforward solution to hide the popup when leaving the page with browser-back

[thomasharre]

If a Popup is open and the user uses the browser-back (or forward) he navigates to the previous page but the Popup stays visible. Ideally the PopUp would automatically disappear when the Component it is for is detached.

Initially I thought I would solve this by adding a BeforeLeaveObserver, so something like

public class MyPopup extends Popup implements BeforeLeaveObserver {

  public void beforeLeave(BeforeLeaveEvent event) {
    if (isOpened()) {
      hide();
    }
  }

}

But that did not work.

Markus then found this solution that works:

public class MyPopup extends Popup implements BeforeLeaveObserver {

  public void beforeLeave(BeforeLeaveEvent event) {
    if (isOpened()) {
      final BeforeLeaveEvent.ContinueNavigationAction postponedEvent = event.postpone();
      hideWithResult().then(result -> postponedEvent.proceed());
    }
  }

  private PendingJavaScriptResult hideWithResult() {
    return getElement().callJsFunction("hide");
  }

}

So could the popup be changed, to either disappear automatically or to always disappear when hide is called?

[TatuLund]

The popup is implemented using vaadin-overlay component. And I am now contemplating what is the correct action here.

One approach is to conclude that the solution above is the correct one and should be used in with Popup, and if necessary with other components utilizing vaadin-overlay (e.g. Notification, Tooltip, Dialog, ...)

Or should there be some change done in vaadin-overlay itself (then all the components using it, would inherit the fix, not just the Popup)

Or should all the components utilizing vaadin-overlay be fixed individually as per need arises.

[TatuLund]

With some research I found that the same problem has been reported with Dialog as well

https://github.com/vaadin/flow-components/issues/1541