Keeping focused non-modal Dialog above others with z-index

[ignas-k]

In a scenario where multiple non-modal dialogs are open, it would be nice if focusing on a single dialog would bring that dialog to the top (through z-index). Would it be possible for this to be handled by iTwinUI? Example:

[Ben-Pusey-Bentley]

This should be possible for iTwinUI to handle, since it seems to just be some styling. Some additional information on how exactly you are implementing this would be nice. Are you using the :focus pseudo-class to set the z-index for the focused dialog, or are you using some other method?

[ignas-k]

Our current implementation is passing style prop with zIndex to Dialog and onPointerDown prop to Dialog.Main so something like this:

     <Dialog style={style} {...props}>
        <Dialog.Main
          onPointerDown={handleContainerPointerDown}
          {...mainProps}
        >
          <Dialog.Content>{content}</Dialog.Content>
        </Dialog.Main>
      </Dialog>

Not sure if this is the best way to implement this functionality though.

[mayank99]

onPointerDown will only cover pointers. We need to also cover other input devices, probably using onFocus.