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:
@@ -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();
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
@@ -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={
|
||||||
|
|||||||
Reference in New Issue
Block a user