js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'gtyamamoto-fix/ctrlkeys-usability-sl-select' into next

Browse Source
This commit is contained in:
Cory LaViska
2021-08-20 09:40:43 -04:00
parent 917dbb12da 0a45f446e2
commit b7caba8b11
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/select/select.test.ts
View File

@@ -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('<sl-select>', () => {
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`
<sl-select>
<sl-menu-item value="option-1">Option 1</sl-menu-item>
<sl-menu-item value="option-2">Option 2</sl-menu-item>
<sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select>
`)) 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`
<sl-select>
<sl-menu-item value="option-1">Option 1</sl-menu-item>
<sl-menu-item value="option-2">Option 2</sl-menu-item>
<sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select>
`)) 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');
});
});

5
src/components/select/select.ts
View File

@@ -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();