fix(dialog): not showing if opened before connected

Fixes #4728

PiperOrigin-RevId: 558822066

dialog/dialog_test.ts

@@ -34,6 +34,7 @@ describe('<md-dialog>', () => {
       throw new Error('Failed to query rendered <md-dialog>');
     }
 
+    disableDialogAnimations(dialog);
     const harness = new DialogHarness(dialog);
     const dialogElement = dialog.shadowRoot?.querySelector('dialog');
     if (!dialogElement) {
@@ -127,6 +128,7 @@ describe('<md-dialog>', () => {
       contentElement.click();
       expect(isClosing).not.toHaveBeenCalled();
       dialogElement.click();
+      await env.waitForStability();
       expect(isClosing).toHaveBeenCalled();
     });
 
@@ -175,4 +177,29 @@ describe('<md-dialog>', () => {
         .withContext('dialog.returnValue after close event canceled')
         .toBe(prevReturnValue);
   });
+
+  it('should open on connected if opened before connected to DOM', async () => {
+    const dialog = document.createElement('md-dialog');
+    disableDialogAnimations(dialog);
+    dialog.open = true;
+    expect(dialog.shadowRoot?.querySelector('dialog')?.open)
+        .withContext('inner <dialog> should not be open yet')
+        .not.toBeTrue();
+
+    const root = env.render(html``);
+    root.appendChild(dialog);
+    await env.waitForStability();
+    expect(dialog.shadowRoot?.querySelector('dialog')?.open)
+        .withContext('inner <dialog> should be open after connecting')
+        .toBeTrue();
+  });
 });
+
+function disableDialogAnimations(dialog: MdDialog) {
+  dialog.getOpenAnimation = () => {
+    return {};
+  };
+  dialog.getCloseAnimation = () => {
+    return {};
+  };
+}

dialog/internal/dialog.ts

@@ -122,8 +122,9 @@ export class Dialog extends LitElement {
    *     `opened` event was fired.
    */
   async show() {
-    const {dialog, container} = this;
-    if (!dialog || !container || dialog.open) {
+    await this.updateComplete;
+    const dialog = this.dialog!;
+    if (dialog.open) {
       return;
     }
 
@@ -161,8 +162,9 @@ export class Dialog extends LitElement {
    *     `closed` event was fired.
    */
   async close(returnValue = this.returnValue) {
-    const {dialog, container} = this;
-    if (!dialog || !container || !dialog.open) {
+    await this.updateComplete;
+    const dialog = this.dialog!;
+    if (!dialog.open) {
       return;
     }