Skip to content

Commit

Permalink
fix: allow ctrl/command + key when the sl-select is on focus
Browse files Browse the repository at this point in the history
- doing a more simplistic approach to handle ctrlKey/metaKey values
  • Loading branch information
gtyamamoto committed Aug 20, 2021
1 parent 066f7cf commit 767c0b3
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 18 deletions.
5 changes: 1 addition & 4 deletions src/components/select/select.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,7 @@ describe('<sl-select>', () => {
`)) as SlSelect;
const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement;
selectBox.focus();
const ctrlKeyEvent = new KeyboardEvent('keydown', { key: 'Control' });
selectBox.dispatchEvent(ctrlKeyEvent);
await aTimeout(100);
const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
const rKeyEvent = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true });
selectBox.dispatchEvent(rKeyEvent);
await aTimeout(100);
expect(selectBox.getAttribute('aria-expanded')).to.equal('false');
Expand Down
18 changes: 4 additions & 14 deletions src/components/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export default class SlSelect extends LitElement {
private helpTextId = `select-help-text-${id}`;
private labelId = `select-label-${id}`;
private resizeObserver: ResizeObserver;
private isCtrlKeyPressed = false;

@state() private hasFocus = false;
@state() private hasHelpTextSlot = false;
Expand Down Expand Up @@ -250,28 +249,20 @@ export default class SlSelect extends LitElement {
}
}

// toggling CTRL/Command key state for ctrl + any key commands
if (event.key === 'Control' || event.metaKey) {
this.isCtrlKeyPressed = true;
// 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 (if not ctrl key is pressed) and initiate type to select
if (!this.isOpen && !this.isCtrlKeyPressed && event.key.length === 1) {
// All other "printable" keys open the menu and initiate type to select
if (!this.isOpen && event.key.length === 1) {
event.stopPropagation();
event.preventDefault();
this.dropdown.show();
this.menu.typeToSelect(event.key);
}
}

handleKeyUp(event: KeyboardEvent) {
// toggling CTRL/Command key state for ctrl + any key commands
if (event.key === 'Control' || event.metaKey) {
this.isCtrlKeyPressed = false;
}
}

handleLabelClick() {
const box = this.shadowRoot?.querySelector('.select__box') as HTMLElement;
box.focus();
Expand Down Expand Up @@ -491,7 +482,6 @@ export default class SlSelect extends LitElement {
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@keydown=${this.handleKeyDown}
@keyup=${this.handleKeyUp}
>
<div class="select__label">
${this.displayTags.length
Expand Down

0 comments on commit 767c0b3

Please sign in to comment.