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/4] 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/4] 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();
         }

From 6273acef029ae444813a8c162bc2d68a5b9b076a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= <l>
Date: Tue, 13 Jan 2026 09:31:10 +0800
Subject: [PATCH 3/4] add isEditable

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

diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index 06e6c45..3de976f 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -2,6 +2,7 @@ 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';
@@ -328,15 +329,21 @@ const Preview: React.FC<PreviewProps> = props => {
 
   // >>>>> Effect: Keyboard
   const onKeyDown = useEvent((event: KeyboardEvent) => {
-    if (open) {
-      if (showLeftOrRightSwitches) {
-        if (event.key === 'ArrowLeft') {
-          onActive(-1);
-          event.preventDefault();
-        } else if (event.key === 'ArrowRight') {
-          onActive(1);
-          event.preventDefault();
-        }
+    if (!open) {
+      return;
+    }
+
+    if (KeyCode.isEditableTarget(event)) {
+      return;
+    }
+
+    if (showLeftOrRightSwitches) {
+      if (event.key === 'ArrowLeft') {
+        onActive(-1);
+        event.preventDefault();
+      } else if (event.key === 'ArrowRight') {
+        onActive(1);
+        event.preventDefault();
       }
     }
   });

From 77acb0e2c20a0cfef88881b9ba6d1a6824171cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= <l>
Date: Tue, 13 Jan 2026 09:34:26 +0800
Subject: [PATCH 4/4] update

---
 src/Preview/index.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
index 3de976f..057608a 100644
--- a/src/Preview/index.tsx
+++ b/src/Preview/index.tsx
@@ -329,22 +329,16 @@ const Preview: React.FC<PreviewProps> = props => {
 
   // >>>>> Effect: Keyboard
   const onKeyDown = useEvent((event: KeyboardEvent) => {
-    if (!open) {
+    if (!open || !showLeftOrRightSwitches || KeyCode.isEditableTarget(event)) {
       return;
     }
 
-    if (KeyCode.isEditableTarget(event)) {
-      return;
-    }
-
-    if (showLeftOrRightSwitches) {
-      if (event.key === 'ArrowLeft') {
-        onActive(-1);
-        event.preventDefault();
-      } else if (event.key === 'ArrowRight') {
-        onActive(1);
-        event.preventDefault();
-      }
+    if (event.key === 'ArrowLeft') {
+      onActive(-1);
+      event.preventDefault();
+    } else if (event.key === 'ArrowRight') {
+      onActive(1);
+      event.preventDefault();
     }
   });