From deb3bfefb0d670282877d17713c768c636ce0316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= Date: Tue, 30 Dec 2025 15:19:45 +0800 Subject: [PATCH 1/5] 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 = 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?= Date: Tue, 30 Dec 2025 15:58:37 +0800 Subject: [PATCH 2/5] 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 = 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?= Date: Tue, 13 Jan 2026 09:31:10 +0800 Subject: [PATCH 3/5] 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 = 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?= Date: Tue, 13 Jan 2026 09:34:26 +0800 Subject: [PATCH 4/5] 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 = 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(); } }); From 9dc2a9d2f726be0ce9a3cfa9384212f4e006b2fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= Date: Thu, 5 Mar 2026 17:31:41 +0800 Subject: [PATCH 5/5] update testcase --- tests/previewGroup.test.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/tests/previewGroup.test.tsx b/tests/previewGroup.test.tsx index 0c847ed..798f360 100644 --- a/tests/previewGroup.test.tsx +++ b/tests/previewGroup.test.tsx @@ -1,4 +1,3 @@ -import KeyCode from '@rc-component/util/lib/KeyCode'; import { act, fireEvent, render } from '@testing-library/react'; import React from 'react'; import Image from '../src'; @@ -171,7 +170,7 @@ describe('PreviewGroup', () => { document.querySelector('.rc-image-preview-switch-prev.rc-image-preview-switch-disabled'), ).toBeTruthy(); - fireEvent.keyDown(window, { keyCode: KeyCode.RIGHT }); + fireEvent.keyDown(window, { key: 'ArrowRight' }); act(() => { jest.runAllTimers(); }); @@ -180,7 +179,7 @@ describe('PreviewGroup', () => { document.querySelector('.rc-image-preview-switch-next.rc-image-preview-switch-disabled'), ).toBeTruthy(); - fireEvent.keyDown(window, { keyCode: KeyCode.LEFT }); + fireEvent.keyDown(window, { key: 'ArrowLeft' }); act(() => { jest.runAllTimers(); });