diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts index 25adf9ef32..fec7d68c59 100644 --- a/src/components/select/select.test.ts +++ b/src/components/select/select.test.ts @@ -1,4 +1,4 @@ -import { expect, fixture, html, waitUntil } from '@open-wc/testing'; +import { expect, fixture, html, waitUntil, aTimeout } from '@open-wc/testing'; import sinon from 'sinon'; import '../../../dist/shoelace.js'; @@ -21,4 +21,36 @@ describe('', () => { expect(changeHandler).to.have.been.calledOnce; }); + + it('should open the menu when any letter key is pressed with sl-select is on focus', async () => { + const el = (await fixture(html` + + Option 1 + Option 2 + Option 3 + + `)) as SlSelect; + const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement; + selectBox.focus(); + const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' }); + selectBox.dispatchEvent(rKeyEvent); + await aTimeout(100); + expect(selectBox.getAttribute('aria-expanded')).to.equal('true'); + }); + + it('should not open the menu when ctrl + R is pressed with sl-select is on focus', async () => { + const el = (await fixture(html` + + Option 1 + Option 2 + Option 3 + + `)) as SlSelect; + const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement; + selectBox.focus(); + const rKeyEvent = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true }); + selectBox.dispatchEvent(rKeyEvent); + await aTimeout(100); + expect(selectBox.getAttribute('aria-expanded')).to.equal('false'); + }); }); diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 3702b0fccc..2a93169bb0 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -253,6 +253,11 @@ export default class SlSelect extends LitElement { } } + // don't open the menu when a CTRL/Command key is pressed + if (event.ctrlKey || event.metaKey) { + return; + } + // All other "printable" keys open the menu and initiate type to select if (!this.isOpen && event.key.length === 1) { event.stopPropagation();