Nested HTML modals function differently than independent HTML modals

[rich-j]

This code works as expected:

<material-button (trigger)="vis1 = true">Test 1</material-button>  
<modal [visible]="vis1" (shieldClick)="vis1 = false">
  Test 1 content
  <material-button (trigger)="vis1inner = true">Test 1 inner</material-button>  
</modal>
<modal [visible]="vis1inner" (shieldClick)="vis1inner = false">
  Test 1 inner content
</modal>

Press the Test 1 button and the first modal is displayed with Test 1 content followed by the Test 1 inner button. Press the Test 1 inner button and the second independent modal is displayed on top of the first modal's content (nested display) showing Test 1 inner content. Shield click dismisses - and yes it's minimal code so it's not pretty.

We expected this code to work the same. The difference is that the second modal is coded as being nested in the HTML (it's actually in a component being used on the first modal):

<material-button (trigger)="vis2 = true">Test 2</material-button>  
<modal [visible]="vis2" (shieldClick)="vis2 = false">
  Test 2 content
  <material-button (trigger)="vis2inner = true">Test 2 inner</material-button>  
  <modal [visible]="vis2inner" (shieldClick)="vis2inner = false">
    Test 2 inner content
  </modal>
</modal>

The first modal displays as expected. When the Test 2 inner button on the first modal is pressed, the second (nested) modal is displayed, but the first modal disappears. This is an issue for us because we use deferredContent on our first modal and both modals vanish.

Yes, modals on modals are generally considered bad design. However, our second modals are specific data editors - for example to pick a date on the first modal, we open a calendar in the second modal.

dart: '^2.0.0' angular: '^5.0.0' angular_components: '^0.9.1'

[nshahan]

Where does the modal element that you are using come from? Is the outer modal being dismissed automatically because there was a click outside of it?

[rich-j]

The HTML above is functional given the dependencies are satisfied. Define the directives and the variables bool vis1, vis1inner, vis2, vis2inner;. Is there an Angular capable version of DartPad? I just created the above example as temporary code in a window in our project.

The works example starts by pressing the Test 1 button. This will display Test 1 content Test 1 inner in the middle of the screen. Note that this is a minimal example so no background is defined (i.e. dialog container) so it just displays the text over whatever content exists "under" the modal. Press the Test 1 inner text button and the second modal's text will display garbled on top of the first. Again, without a background it's ugly. Click off of the contents and the second modal will close. Click again and the first modal will close.

Now do the same with the second nested code example. Press Test 2 to get the first content. Press the Test 2 inner button and the first modal disappears and the second ("inner") modal is displayed. We expected it to overlay the contents garbled on top of the first modal. Click off of the contents and the second modal disappears and the first one is recreated. Click off again and all modals are closed.

[nshahan]

Sorry I was confused if you were using the modal component from this package or somewhere else. Ours wasn't designed to be used nested inside another.

We do have a new modal system that was recently developed that supports more complicated scenarios. In the future, it is possible we could add this to the release but I don't expect it to be included this quarter.

[rich-j]

Thanks. Yes, we are using import 'package:angular_components/material_dialog/material_dialog.dart';. The reason we end up with "nested" dialogs is that our dialogs use our data components - some of which want to open another dialog (e.g. date, time, color, picture).

We almost have a workaround. We're now creating all of our dialog components dynamically using componentLoader.loadNextToLocation(componentFactory, dynamicLocation);. The trick to "flatten" the modal hierarchy is to have an application-wide ViewContainerRef dynamicLocation; such that all modals are created as siblings instead of nested.