Skip to content

fix: prevent page scroll when switching images with keyboard #493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cactuser-Lu wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: prevent page scroll when switching images with keyboard #493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
deb3bfe
fix: prevent page scroll when switching images with keyboard
Dec 30, 2025
adf7f18
update keycode
Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
9 changes: 4 additions & 5 deletions src/Preview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -330,13 +329,13 @@ const Preview: React.FC<PreviewProps> = props => {
// >>>>> Effect: Keyboard
const onKeyDown = useEvent((event: KeyboardEvent) => {
if (open) {
const { keyCode } = event;

if (showLeftOrRightSwitches) {
if (keyCode === KeyCode.LEFT) {
if (event.key === 'ArrowLeft') {
onActive(-1);
} else if (keyCode === KeyCode.RIGHT) {
event.preventDefault();
} else if (event.key === 'ArrowRight') {
onActive(1);
event.preventDefault();
}
Comment on lines +333 to 339
Copy link

@coderabbitai coderabbitai bot Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

在可编辑元素中时，应跳过方向键处理。

当前实现在按下方向键时总是会切换图片，即使用户正在输入框、文本域或其他可编辑元素中输入内容。这会导致用户在编辑文本时意外触发图片切换，影响用户体验。

建议在处理方向键之前检查事件目标是否为可编辑元素：

🔎 建议的修复方案

在文件顶部添加辅助函数：

+const isEditableTarget = (target: EventTarget | null): boolean => {
+  if (!target || !(target instanceof Element)) return false;
+  const tagName = target.tagName;
+  if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
+    return true;
+  }
+  if (target instanceof HTMLElement && target.isContentEditable) {
+    return true;
+  }
+  return false;
+};
+
 const Preview: React.FC<PreviewProps> = props => {

然后在键盘事件处理中使用：

   const onKeyDown = useEvent((event: KeyboardEvent) => {
     if (open) {
+      if (isEditableTarget(event.target)) {
+        return;
+      }
       if (showLeftOrRightSwitches) {
         if (event.key === 'ArrowLeft') {
           onActive(-1);

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/Preview/index.tsx around lines 333 to 339, the ArrowLeft/ArrowRight
handler always changes images even when the user is focused in an editable
element; add a small helper (e.g., isEditableTarget) near the top of the file
that returns true for INPUT, TEXTAREA, elements with contentEditable="true" (and
optionally selects, or elements with role="textbox"), and update the keyboard
handler to short-circuit and do nothing when isEditableTarget(event.target) is
true before calling onActive and preventDefault.

}
}
Expand Down
Loading