domino-ui icon indicating copy to clipboard operation
domino-ui copied to clipboard

Window zIndex issues

Open jhickman opened this issue 1 year ago • 3 comments

Couple of issues found with Window and setting zIndex.

Trying to set the zIndex during UI building doesn't appear to work.

new Window("Window")
    .setModal(true)
    .setZIndex(1000)

It doesn't appear to be setting it at all. For a work-around, I ended up adding an open handler

new Window("Window")
    .setModal(true)
    .addOpenListener(() -> this.window.setZIndex(1000))

However, separate/similar issue, since the window is modal, and I'm setting the zindex on the window, the modal backdrop ends up being on top of the Window, thus not allowing any interaction with the window.

jhickman avatar Aug 11 '22 17:08 jhickman

The z-index is calculated every time a modal or a pop-up is opened, it has an initial value of 1040 and increment by 10 every time a a modal is open, and decrement by same amount when a modal is closed, the modal backdrop will follow the most recent opened modal. maybe those values should be configurable?

vegegoku avatar Aug 11 '22 18:08 vegegoku

Seems that way in ModalDialog, but not in Window. It's not setting the z-index at all from what I can tell.

Also.. the backdrop is weird if there are multiple modals. (probably a separate ticket). If I have a modal Window showing, and then I have a 'help' button that displays a ModalDialog with some help text, the ModalBackdrop goes in front of the Window, but when the help text modal closes, the ModalBackdrop is staying in front of the Window.

jhickman avatar Aug 11 '22 19:08 jhickman

Doing a bit more looking into the domino code, and i don't believe it has anything to do with Window (directly) per-se. This happens with any subclass of BaseModal.

In BaseModal.addBackdrop(), it's checking for existence of other open modals and will only set the z-index on the backdrop when there are others open. Otherwise, it doesn't set the z-index on the Window, nor the Backdrop on the first open window. That's where it causes problems. When a second modal is opened, the zindex of the backdrop goes higher than the first open modal, and the second modal goes in front of the backdrop. When the second modal is closed, the backdrop tries to 'restore' it's z-index (even though it didn't have one set before) and ends up being in front of the first modal; thus blocking interactions with that first modal.

I think a fix could go in one of following ways.

  1. Always set the z-index on the Modal and the Backdrop regardless of any open ones already
  2. 'save' the last z-index value of the backdrop and restore that rather than assuming subtracting 10 will suffice
  3. If ModalBackDrop.openedModalsCount == 1, then remove the z-index css property; which WILL restore it from the initial state (as it is today)

Another thing to note; from my initial description of the ticket, I found why setting the zindex at UI build time doesn't work. In BaseModal.open(), it removes the z-index css property; ignoring the fact that the zindex may have been set manually.

jhickman avatar Aug 12 '22 12:08 jhickman

I did not understand exactly how I can reproduce this, But I tried with 1 window with a button that opens a new one, both are set as modal, when I open the first one then open the second one, the modal back drop moves in-front of the first one and behind the 2nd window, when I close the second window it goes back behind the first window, now setting the z-index manually will cause the issue of the window show up behind the backdrop, added a configuration to set the initial z-index and when I set it to 1000 instead of setting it in the window directly it worked.

Not sure if this is enough or not?

vegegoku avatar Nov 28 '22 20:11 vegegoku

All z-index management is now moved to the new class ZIndexManager which has a default implementation that will always increment and never decrement the z-index, the initial value and the increment value for the z-index are configured using the DominoUIConfig classs, and the implementation of the ZIndexManager can be replaced also using the DominoUIConfig.

vegegoku avatar Dec 19 '22 15:12 vegegoku