Enhancement to open multiple dialogs using $mdDialog

[denver-HJS]

Hello,

I am inquiring to find out whether or not there are plans to add functionality to the $mdDialog service for showing multiple dialogs. I am aware of this thread but I'd like to rekindle the discussion.

My specific need is that my application requires a virtual keyboard. I implemented this virtual keyboard using a wrapper service around $mdDialog (and a separate directive). This worked flawlessly...up until the point I tried to apply my virtual keyboard to an input that's inside of a dialog. Once the user clicks the input within the dialog it goes away and up comes the keyboard.

1) Is there any chance that having multiple dialogs will be implemented in the future?
2) Does anyone have suggestions for working around this limitation?

I found the options $mdDialog provides to be extremely useful, so it's disappointing to rearrange my architecture and try to recreate the niceties myself.

showKeyboard(keyboardType, inputElement, modelUpdateEvent, customValidation) {
      var s = this;
      let positionKeyboard = () => {
        $('#keyboard-dialog').position({
          of: $(inputElement),
          my: "right top",
          at: "right bottom",
          collision: "flipfit flipfit"
        });
        s._isDragging = false;
        let dragDelay = 1000;
        let dragTimeout = undefined;
        $('#keyboard-dialog').on("mousedown", () => {
          if(s._isDragging == false) {
            dragTimeout = this._$timeout(() => {
              s._isDragging = true;
              s._dragStartTime = moment();
              let draggingMask = $.parseHTML(`<div class="drag-mask"></div>`);
              $(draggingMask).css({
                position: 'absolute',
                width: '100%',
                height: '100%',
                top: '0px',
                left: '0px',
                zIndex: 100
              });
              $('#keyboard-dialog').append(draggingMask);
              $('#keyboard-dialog').css({
                border: '3px solid rgb(86, 180, 239)',
                'box-shadow': '0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6)'
              });
              $('#keyboard-dialog').draggable();
            }, dragDelay);
          }
        });

        $('#keyboard-dialog').on("mouseup", () => {
          if(angular.isDefined(dragTimeout)) {
            s._$timeout.cancel(dragTimeout);
            dragTimeout = undefined;
          }
          let now = moment();
          let timespan = moment.duration(now.diff(s._dragStartTime));
          if($(".drag-mask").length && s._isDragging && timespan.asMilliseconds() > 700) {
            s._isDragging = false;
            $(".drag-mask").remove();
            $('#keyboard-dialog').css({
              border: 'none',
              'box-shadow': 'none'
            });
            $('#keyboard-dialog').draggable("destroy");
          }
        });
      };

      this._$mdDialog.show({
        templateUrl: 'partials/dialogs/keyboard/keyboardDialog.html',
        controller: 'keyboardDialogController as vm',
        clickOutsideToClose: true,
        hasBackdrop: false,
        //openFrom: inputElement,
        closeTo: inputElement,
        onComplete: positionKeyboard,
        locals: {
          keyboardType: keyboardType,
          inputElement: inputElement,
          modelUpdateEvent: modelUpdateEvent,
          customValidation: customValidation
        }
      })
      .then(
        () => { $(inputElement).trigger("blur"); },
        () => { $(inputElement).trigger("blur"); }
      );
    }

[devversion]

We do not have plans to support it the new future. But we will create the base for multiple interim elements (like the dialog) in #8624. So once #8624 is ready, we'll probably revisit the multiple dialogs issue.

[denver-HJS]

Alright, understood. Thanks for the quick feedback =)

[jaymanned]

@devversion Will you let us know here if you finally manage to revisit the multiple dialogs issue?

[devversion]

@jaymanned Definitely yes! It's just a lower priority on my queue for now, but will definitely revisit that issue.

[olingern]

Copying and pasting my comment from #3072 for others who may stumble upon this or are unaware of existing functionality:

---

Unsure why this isn't documented, but using skipHide on the child dialog will allow this.

Here's a plunker

And here's the line of code that "skips" hiding the parent dialog.

[devversion]

@olingern This is not documented, because it's currently only internal and designed for use with the $mdMenu.

In #9053, skipHide` has been redesigned to properly handle multiple interims at the same time.