Correctly detect keyboard input "Enter" (#479)

The "code" property returns the physical key that was pressed.
Thus, e.g. "Enter" on the numpad is "NumpadEnter" and not "Enter".
This commit is contained in:
schroda
2023-11-26 14:29:03 +01:00
committed by GitHub
parent c6cc7c14dd
commit ee9811bf53
4 changed files with 9 additions and 10 deletions

View File

@@ -127,7 +127,7 @@ export function DoublePagedPager(props: IReaderProps) {
} }
function keyboardControl(e: KeyboardEvent) { function keyboardControl(e: KeyboardEvent) {
switch (e.code) { switch (e.key) {
case 'Space': case 'Space':
e.preventDefault(); e.preventDefault();
nextPage(); nextPage();

View File

@@ -54,7 +54,7 @@ export function PagedPager(props: IReaderProps) {
} }
function keyboardControl(e: KeyboardEvent) { function keyboardControl(e: KeyboardEvent) {
switch (e.code) { switch (e.key) {
case 'Space': case 'Space':
e.preventDefault(); e.preventDefault();
nextPage(); nextPage();

View File

@@ -132,7 +132,7 @@ export function VerticalPager(props: IReaderProps) {
useEffect(() => { useEffect(() => {
const handleKeyboard = (e: KeyboardEvent) => { const handleKeyboard = (e: KeyboardEvent) => {
switch (e.code) { switch (e.key) {
case 'Space': case 'Space':
e.preventDefault(); e.preventDefault();
go(e.shiftKey ? 'up' : 'down'); go(e.shiftKey ? 'up' : 'down');

View File

@@ -66,15 +66,9 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
}; };
const handleKeyboardEvent = (e: KeyboardEvent) => { const handleKeyboardEvent = (e: KeyboardEvent) => {
if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) { if (e.key === 'F3' || (e.ctrlKey && e.key === 'f')) {
e.preventDefault(); e.preventDefault();
updateSearchOpenState(true); updateSearchOpenState(true);
return;
}
if (e.code === 'Enter') {
e.preventDefault();
handleChange(searchString);
} }
}; };
@@ -131,6 +125,11 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
<Input <Input
value={searchString} value={searchString}
onChange={(e) => setSearchString(e.target.value)} onChange={(e) => setSearchString(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleChange(searchString);
}
}}
onBlur={handleBlur} onBlur={handleBlur}
inputRef={inputRef} inputRef={inputRef}
endAdornment={ endAdornment={