Limit physicalKeyboardHighlightPreventDefault to modifier keys. Per #1841

This commit is contained in:
Francisco Hodge 2023-01-18 19:49:47 -05:00
parent abc034c3c8
commit e49f06089f

View File

@ -24,15 +24,15 @@ class PhysicalKeyboard {
Utilities.bindMethods(PhysicalKeyboard, this); Utilities.bindMethods(PhysicalKeyboard, this);
} }
handleHighlightKeyDown(event: KeyboardEvent) { handleHighlightKeyDown(e: KeyboardEvent) {
const options = this.getOptions(); const options = this.getOptions();
if(options.physicalKeyboardHighlightPreventDefault){ if(options.physicalKeyboardHighlightPreventDefault && this.isMofifierKey(e)){
event.preventDefault(); e.preventDefault();
event.stopImmediatePropagation(); e.stopImmediatePropagation();
} }
const buttonPressed = this.getSimpleKeyboardLayoutKey(event); const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
this.dispatch((instance: any) => { this.dispatch((instance: any) => {
const standardButtonPressed = instance.getButtonElement(buttonPressed); const standardButtonPressed = instance.getButtonElement(buttonPressed);
@ -70,7 +70,7 @@ class PhysicalKeyboard {
} else if (options.physicalKeyboardHighlightPressUseClick) { } else if (options.physicalKeyboardHighlightPressUseClick) {
buttonDOM[0]?.click(); buttonDOM[0]?.click();
} else { } else {
instance.handleButtonClicked(buttonName, event); instance.handleButtonClicked(buttonName, e);
} }
} }
} else { } else {
@ -82,7 +82,7 @@ class PhysicalKeyboard {
} else if (options.physicalKeyboardHighlightPressUseClick) { } else if (options.physicalKeyboardHighlightPressUseClick) {
buttonDOM.click(); buttonDOM.click();
} else { } else {
instance.handleButtonClicked(buttonName, event); instance.handleButtonClicked(buttonName, e);
} }
} }
} }
@ -90,15 +90,15 @@ class PhysicalKeyboard {
}); });
} }
handleHighlightKeyUp(event: KeyboardEvent) { handleHighlightKeyUp(e: KeyboardEvent) {
const options = this.getOptions(); const options = this.getOptions();
if(options.physicalKeyboardHighlightPreventDefault){ if(options.physicalKeyboardHighlightPreventDefault && this.isMofifierKey(e)){
event.preventDefault(); e.preventDefault();
event.stopImmediatePropagation(); e.stopImmediatePropagation();
} }
const buttonPressed = this.getSimpleKeyboardLayoutKey(event); const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
this.dispatch((instance: any) => { this.dispatch((instance: any) => {
const buttonDOM = const buttonDOM =
@ -132,11 +132,11 @@ class PhysicalKeyboard {
/** /**
* Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
* @param {object} event The KeyboardEvent * @param {object} e The KeyboardEvent
*/ */
getSimpleKeyboardLayoutKey(event: KeyboardEvent) { getSimpleKeyboardLayoutKey(e: KeyboardEvent) {
let output = ""; let output = "";
const keyId = event.code || event.key || this.keyCodeToKey(event?.keyCode); const keyId = e.code || e.key || this.keyCodeToKey(e?.keyCode);
if ( if (
keyId?.includes("Numpad") || keyId?.includes("Numpad") ||
@ -147,9 +147,9 @@ class PhysicalKeyboard {
keyId?.includes("Alt") || keyId?.includes("Alt") ||
keyId?.includes("Meta") keyId?.includes("Meta")
) { ) {
output = event.code || ""; output = e.code || "";
} else { } else {
output = event.key || this.keyCodeToKey(event?.keyCode) || ""; output = e.key || this.keyCodeToKey(e?.keyCode) || "";
} }
return output.length > 1 ? output?.toLowerCase() : output; return output.length > 1 ? output?.toLowerCase() : output;
@ -158,7 +158,7 @@ class PhysicalKeyboard {
/** /**
* Retrieve key from keyCode * Retrieve key from keyCode
*/ */
keyCodeToKey(keyCode: number) { keyCodeToKey(keyCode: number): string {
return { return {
8: "Backspace", 8: "Backspace",
9: "Tab", 9: "Tab",
@ -257,7 +257,18 @@ class PhysicalKeyboard {
220: "\\", 220: "\\",
221: "]", 221: "]",
222: "'", 222: "'",
}[keyCode]; }[keyCode] || "";
}
isMofifierKey = (e: KeyboardEvent): boolean => {
return (
e.altKey
|| e.ctrlKey
|| e.shiftKey
|| ["Tab", "CapsLock", "Esc", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(
e.code || e.key || this.keyCodeToKey(e?.keyCode)
)
)
} }
} }