diff --git a/select/harness.ts b/select/harness.ts index 88637fe182..cbaa28bd85 100644 --- a/select/harness.ts +++ b/select/harness.ts @@ -20,6 +20,9 @@ export class SelectHarness extends Harness { field.click(); } + async clickAndWaitForMenu() { + const menu = this.getMenu(); + const menuOpen = menu.open === true; + const waitForMenu = new Promise((resolve) => { + menu.addEventListener(menuOpen ? 'closed' : 'opened', () => { + resolve(); + }, {once: true}); + }); + await this.click(); + await waitForMenu; + } + async clickOption(index: number) { const menu = this.element.renderRoot.querySelector('md-menu')!; if (!menu.open) { diff --git a/select/select_test.ts b/select/select_test.ts index 89f8706797..7b7d2f87b6 100644 --- a/select/select_test.ts +++ b/select/select_test.ts @@ -47,7 +47,9 @@ describe('', () => { const selectEl = root.querySelector('md-outlined-select')!; await selectEl.updateComplete; - await new SelectHarness(selectEl).clickOption(1); + const harness = new SelectHarness(selectEl); + await harness.clickAndWaitForMenu(); + await harness.clickOption(1); expect(changed).toBeTrue(); }); @@ -177,6 +179,33 @@ describe('', () => { ], }); }); + + it('closes select when field re-clicked', async () => { + render( + html` + + + + `, + root); + const selectEl = root.querySelector('md-outlined-select')!; + await selectEl.updateComplete; + + const spanEl = selectEl.shadowRoot!.querySelector( + 'span.select' + )!; + const menuEl = selectEl.shadowRoot!.querySelector('md-menu')!; + + const harness = new SelectHarness(selectEl); + await harness.clickAndWaitForMenu(); + expect(spanEl.classList.contains('open')).toBeTrue(); + expect(menuEl.open).toBeTrue(); + + await harness.clickAndWaitForMenu(); + + expect(menuEl.open).toBeFalse(); + expect(spanEl.classList.contains('open')).toBeFalse(); + }); }); describe('', () => {