in packages/web-components/fast-foundation/src/picker/picker.ts [577:707]
public handleKeyDown(e: KeyboardEvent): boolean {
if (e.defaultPrevented) {
return false;
}
switch (e.key) {
// TODO: what should "home" and "end" keys do, exactly?
//
// case keyHome: {
// if (!this.flyoutOpen) {
// this.toggleFlyout(true);
// } else {
// if (this.menuElement.optionElements.length > 0) {
// this.setFocusedOption(0);
// }
// }
// return false;
// }
// case keyEnd: {
// if (!this.flyoutOpen) {
// this.toggleFlyout(true);
// } else {
// if (this.menuElement.optionElements.length > 0) {
// this.toggleFlyout(true);
// this.setFocusedOption(this.menuElement.optionElements.length - 1);
// }
// }
// return false;
// }
case keyArrowDown: {
if (!this.flyoutOpen) {
this.toggleFlyout(true);
} else {
const nextFocusOptionIndex = this.flyoutOpen
? Math.min(
this.menuFocusIndex + 1,
this.menuElement.optionElements.length - 1
)
: 0;
this.setFocusedOption(nextFocusOptionIndex);
}
return false;
}
case keyArrowUp: {
if (!this.flyoutOpen) {
this.toggleFlyout(true);
} else {
const previousFocusOptionIndex = this.flyoutOpen
? Math.max(this.menuFocusIndex - 1, 0)
: 0;
this.setFocusedOption(previousFocusOptionIndex);
}
return false;
}
case keyEscape: {
this.toggleFlyout(false);
return false;
}
case keyEnter: {
if (
this.menuFocusIndex !== -1 &&
this.menuElement.optionElements.length > this.menuFocusIndex
) {
this.menuElement.optionElements[this.menuFocusIndex].click();
}
return false;
}
case keyArrowRight: {
if (document.activeElement !== this.inputElement) {
this.incrementFocusedItem(1);
return false;
}
// don't block if arrow keys moving caret in input element
return true;
}
case keyArrowLeft: {
if (this.inputElement.selectionStart === 0) {
this.incrementFocusedItem(-1);
return false;
}
// don't block if arrow keys moving caret in input element
return true;
}
case keyDelete:
case keyBackspace: {
if (document.activeElement === null) {
return true;
}
if (document.activeElement === this.inputElement) {
if (this.inputElement.selectionStart === 0) {
this.selection = this.selectedItems
.slice(0, this.selectedItems.length - 1)
.toString();
this.toggleFlyout(false);
return false;
}
// let text deletion proceed
return true;
}
const selectedItems: Element[] = Array.from(this.listElement.children);
const currentFocusedItemIndex: number = selectedItems.indexOf(
document.activeElement
);
if (currentFocusedItemIndex > -1) {
// delete currently focused item
this.selection = this.selectedItems
.splice(currentFocusedItemIndex, 1)
.toString();
DOM.queueUpdate(() => {
(selectedItems[
Math.min(selectedItems.length, currentFocusedItemIndex)
] as HTMLElement).focus();
});
return false;
}
return true;
}
}
this.toggleFlyout(true);
return true;
}