From deb3bfefb0d670282877d17713c768c636ce0316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= <l>
Date: Tue, 30 Dec 2025 15:19:45 +0800
Subject: [PATCH 1/2] fix: prevent page scroll when switching images with
 keyboard

---
 package.json          | 2 +-
 src/Preview/index.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0d35f36..3cf6ed0 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.0.0",
     "@rc-component/portal": "^2.1.2",
-    "@rc-component/util": "^1.3.0",
+    "@rc-component/util": "^1.7.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index bd4f67c..fdc81f0 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -329,14 +329,16 @@ const Preview: React.FC<PreviewProps> = props => {
 
   // >>>>> Effect: Keyboard
   const onKeyDown = useEvent((event: KeyboardEvent) => {
-    if (open) {
+    if (open && !KeyCode.isEditableTarget(event)) {
       const { keyCode } = event;
 
       if (showLeftOrRightSwitches) {
         if (keyCode === KeyCode.LEFT) {
           onActive(-1);
+          event.preventDefault();
         } else if (keyCode === KeyCode.RIGHT) {
           onActive(1);
+          event.preventDefault();
         }
       }
     }

From adf7f1873d6f5b48a2515b79e6fae9e0263b0928 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= <l>
Date: Tue, 30 Dec 2025 15:58:37 +0800
Subject: [PATCH 2/2] update keycode

---
 src/Preview/index.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index fdc81f0..06e6c45 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -2,7 +2,6 @@ import CSSMotion from '@rc-component/motion';
 import Portal, { type PortalProps } from '@rc-component/portal';
 import { useEvent } from '@rc-component/util';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
-import KeyCode from '@rc-component/util/lib/KeyCode';
 import { clsx } from 'clsx';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { PreviewGroupContext } from '../context';
@@ -329,14 +328,12 @@ const Preview: React.FC<PreviewProps> = props => {
 
   // >>>>> Effect: Keyboard
   const onKeyDown = useEvent((event: KeyboardEvent) => {
-    if (open && !KeyCode.isEditableTarget(event)) {
-      const { keyCode } = event;
-
+    if (open) {
       if (showLeftOrRightSwitches) {
-        if (keyCode === KeyCode.LEFT) {
+        if (event.key === 'ArrowLeft') {
           onActive(-1);
           event.preventDefault();
-        } else if (keyCode === KeyCode.RIGHT) {
+        } else if (event.key === 'ArrowRight') {
           onActive(1);
           event.preventDefault();
         }