diff --git a/select/internal/select.ts b/select/internal/select.ts index 4952dbf652..85148f35a7 100644 --- a/select/internal/select.ts +++ b/select/internal/select.ts @@ -732,9 +732,11 @@ export abstract class Select extends selectBaseClass { selectedOptions.forEach(([option]) => { if (item !== option) { option.selected = false; + option.tabIndex = -1; } }); item.selected = true; + item.tabIndex = 0; return this.updateValueAndDisplayText(); } diff --git a/select/select_test.ts b/select/select_test.ts index 89f8706797..1093d5d487 100644 --- a/select/select_test.ts +++ b/select/select_test.ts @@ -52,6 +52,101 @@ describe('', () => { expect(changed).toBeTrue(); }); + it('typeahead selects an option', async () => { + let changed = false; + render( + html` { + changed = true; + }}> + + + `, + root, + ); + const selectEl = root.querySelector('md-outlined-select')!; + await selectEl.updateComplete; + + const harness = new SelectHarness(selectEl); + await harness.focusWithKeyboard(); + await harness.keypress('b'); + await selectEl.updateComplete; + + expect(selectEl.value).withContext('value after typeahead').toBe('banana'); + expect(changed).withContext('option changed').toBeTrue(); + }); + + it('typeahead with no matching option does not change selected option', async () => { + let changed = false; + render( + html` { + changed = true; + }}> + + + `, + root, + ); + const selectEl = root.querySelector('md-outlined-select')!; + await selectEl.updateComplete; + + const harness = new SelectHarness(selectEl); + await harness.focusWithKeyboard(); + await harness.keypress('z'); + await selectEl.updateComplete; + + expect(selectEl.value) + .withContext('value after non-matching typeahead keypress') + .toBe('apple'); + expect(changed).withContext('did not change').toBeFalse(); + }); + + it('clicking an option with mouse and then typeahead with no matching option does not change the selected option', async () => { + render( + html` + + + `, + root, + ); + const selectEl = root.querySelector('md-outlined-select')!; + await selectEl.updateComplete; + + // Open menu to click an option + const harness = new SelectHarness(selectEl); + await harness.clickWithMouse(); + await selectEl.updateComplete; // wait for menu to open + + await harness.clickOption(1); + expect(selectEl.value) + .withContext('value after clicking option') + .toBe('banana'); + + await harness.keypress('z'); + await selectEl.updateComplete; + + expect(selectEl.value) + .withContext( + 'value after non-matching typeahead keypress stays the same (banana)', + ) + .toBe('banana'); + }); + describe('forms', () => { createFormTests({ queryControl: (root) => root.querySelector('md-outlined-select'),