GwtMaterialDesign / gwt-material

A Google Material Design wrapper for GWT
https://gwtmaterialdesign.github.io/gmd-core-demo/
Apache License 2.0
410 stars 124 forks source link

`MaterialDialog` places extra overlays with each opening #1019

Open lukas0krupa opened 2 years ago

lukas0krupa commented 2 years ago

Hi All,

I might be doing something terribly wrong, but I have the following setup. I have simple singleton view with presenter which is attached to the ROOT presenter. The view has 2 dialogs (MaterialDialog) that are programatically opened and closed from various places. Basically, same singleton presenter is injected in places where those dialogs are needed and popped out (opened).

One of the dialogs has yes/no buttons. Among other things they closes the dialog.

Now steps to reproduce the problem:

  1. Opening dialog for the first time and inspecting DOM seems ok. Following lean-overlay is added <div class="lean-overlay black" id="materialize-lean-overlay-1" style="z-index: 1002; opacity: 0.5; visibility: visible; display: block;"></div> Screenshot 2022-03-03 at 13 33 27
  2. Closing the dialog (without refreshing page) and re-opening, I got 2 overlays <div class="lean-overlay black" id="materialize-lean-overlay-2" style="z-index: 1002; opacity: 0.5; visibility: visible; display: block;"></div> <div class="lean-overlay black" id="materialize-lean-overlay-3" style="z-index: 1004; opacity: 0.5; visibility: visible; display: block;"></div> Screenshot 2022-03-03 at 13 33 40
  3. Closing the dialog leave 1 of them <div class="lean-overlay black" id="materialize-lean-overlay-2" style="z-index: 1002; opacity: 0.5; visibility: visible; display: block;"></div> Screenshot 2022-03-03 at 13 33 46
  4. Opening the dialog for 3rd time is tricky as the overlay is in place. Editing DOM and removing display: block; property allows me to open it again. DOM looks like as follows <div class="lean-overlay black" id="materialize-lean-overlay-2" style="z-index: 1002;opacity: 0.5;visibility: visible;/* display: block; */"></div> <div class="lean-overlay black" id="materialize-lean-overlay-4" style="z-index: 1004; opacity: 0.5; visibility: visible; display: block;"></div> <div class="lean-overlay black" id="materialize-lean-overlay-5" style="z-index: 1006; opacity: 0.5; visibility: visible; display: block;"></div>
    Screenshot 2022-03-03 at 13 33 58
  5. Closing the dialog leave the following divs <div class="lean-overlay black" id="materialize-lean-overlay-2" style="z-index: 1002;opacity: 0.5;visibility: visible;/* display: block; */"></div> <div class="lean-overlay black" id="materialize-lean-overlay-4" style="z-index: 1004; opacity: 0.5; visibility: visible; display: block;"></div> `
    Screenshot 2022-03-03 at 13 34 03

Can somebody tell me what I am doing wrong or if this is an issue? Workarounds would be appreciated too.