fix(mdc-dialog): second dialog data-mdc-dialog-initial-focus doesn'…

…t work Fix `data-mdc-dialog-initial-focus` to work in multiple dialogs.
material-components · Jun 26, 2020 · a0ec7e2 · a0ec7e2
1 parent 38197b4
commit a0ec7e2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/mdc-dialog/component.ts b/packages/mdc-dialog/component.ts
@@ -197,6 +197,6 @@ export class MDCDialog extends MDCComponent<MDCDialogFoundation> {
   }
 
   private getInitialFocusEl_(): HTMLElement|null {
-    return document.querySelector(`[${strings.INITIAL_FOCUS_ATTRIBUTE}]`);
+    return this.root.querySelector(`[${strings.INITIAL_FOCUS_ATTRIBUTE}]`);
   }
 }
diff --git a/packages/mdc-dialog/test/component.test.ts b/packages/mdc-dialog/test/component.test.ts
@@ -53,7 +53,7 @@ function getFixture() {
               <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no" type="button">
                 <span class="mdc-button__label">No</span>
               </button>
-              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes" type="button">
+              <button class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes" type="button" data-mdc-dialog-initial-focus>
                 <span class="mdc-button__label">Yes</span>
               </button>
             </div>
@@ -591,4 +591,15 @@ describe('MDCDialog', () => {
     component.layout();
     expect((component as any).foundation.layout).toHaveBeenCalled();
   });
+
+  it(`${strings.INITIAL_FOCUS_ATTRIBUTE} will focus when the dialog is opened`, () => {
+    const {component: component1, yesButton: yesButton1} = setupTest();
+    const {component: component2, yesButton: yesButton2} = setupTest();
+
+    const initialFocusEl1 = (component1.getDefaultFoundation() as any).adapter.getInitialFocusEl();
+    expect(initialFocusEl1).toEqual(yesButton1);
+
+    const initialFocusEl2 = (component2.getDefaultFoundation() as any).adapter.getInitialFocusEl();
+    expect(initialFocusEl2).toEqual(yesButton2);
+  });
 });