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".
Suwayomi · Nov 26, 2023 · ee9811b · ee9811b
1 parent c6cc7c1
commit ee9811b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/src/components/reader/pager/DoublePagedPager.tsx b/src/components/reader/pager/DoublePagedPager.tsx
@@ -127,7 +127,7 @@ export function DoublePagedPager(props: IReaderProps) {
     }
 
     function keyboardControl(e: KeyboardEvent) {
-        switch (e.code) {
+        switch (e.key) {
             case 'Space':
                 e.preventDefault();
                 nextPage();

diff --git a/src/components/reader/pager/PagedPager.tsx b/src/components/reader/pager/PagedPager.tsx
@@ -54,7 +54,7 @@ export function PagedPager(props: IReaderProps) {
     }
 
     function keyboardControl(e: KeyboardEvent) {
-        switch (e.code) {
+        switch (e.key) {
             case 'Space':
                 e.preventDefault();
                 nextPage();

diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx
@@ -132,7 +132,7 @@ export function VerticalPager(props: IReaderProps) {
 
     useEffect(() => {
         const handleKeyboard = (e: KeyboardEvent) => {
-            switch (e.code) {
+            switch (e.key) {
                 case 'Space':
                     e.preventDefault();
                     go(e.shiftKey ? 'up' : 'down');

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