Skip to content

feat: support keyborad event for Tour steps #86

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
wants to merge 2 commits into
base: master
Choose a base branch
from
+57 −7
Open

feat: support keyborad event for Tour steps #86

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a343a90
feat: support keyborad change
Sep 30, 2025
551f26c
update: editable target exclude
Sep 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
52 changes: 45 additions & 7 deletions src/Tour.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { TriggerRef } from '@rc-component/trigger';
import Trigger from '@rc-component/trigger';
import { clsx } from 'clsx';
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
import useEvent from '@rc-component/util/lib/hooks/useEvent';
import KeyCode from '@rc-component/util/lib/KeyCode';
import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
import { useMemo } from 'react';
import { useClosable } from './hooks/useClosable';
Expand Down Expand Up @@ -35,6 +36,7 @@ const Tour: React.FC<TourProps> = props => {
steps = [],
defaultCurrent,
current,
keyboard = true,
onChange,
onClose,
onFinish,
Expand Down Expand Up @@ -88,7 +90,7 @@ const Tour: React.FC<TourProps> = props => {
setHasOpened(true);
}
openRef.current = mergedOpen;
}, [mergedOpen]);
}, [mergedOpen, setMergedCurrent]);

const {
target,
Expand Down Expand Up @@ -156,18 +158,54 @@ const Tour: React.FC<TourProps> = props => {
}
return getPlacements(arrowPointAtCenter);
}, [builtinPlacements, arrowPointAtCenter]);
const handleClose = () => {
setMergedOpen(false);
onClose?.(mergedCurrent);
};

// ========================= Keyboard =========================
// Support Esc to close (if closable) and ArrowLeft/ArrowRight to navigate steps.
const keyboardHandler = useEvent((e: KeyboardEvent) => {
if (keyboard && e.keyCode === KeyCode.ESC) {
if (mergedClosable !== null) {
e.stopPropagation();
e.preventDefault();
handleClose();
}
return;
}

if (keyboard && e.keyCode === KeyCode.LEFT) {
if (mergedCurrent > 0) {
e.preventDefault();
onInternalChange(mergedCurrent - 1);
}
return;
}

if (keyboard && e.keyCode === KeyCode.RIGHT) {
e.preventDefault();
if (mergedCurrent < steps.length - 1) {
onInternalChange(mergedCurrent + 1);
}
return;
}
});
Comment on lines 168 to 204
Copy link

Choose a reason for hiding this comment

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

medium

The keyboard handler implementation can be improved for better readability, correctness, and to adhere to modern web standards.

  • Use e.key instead of e.keyCode: The keyCode property is deprecated. It's better to use e.key for future-proofing and consistency with modern web APIs. This change would also allow for the removal of the KeyCode import.
  • Conditional preventDefault: The e.preventDefault() for the right arrow key is called unconditionally. It should only be called when the step actually changes (i.e., inside the if block), similar to the logic for the left arrow key. This prevents blocking the default browser behavior when at the last step.
  • Improved Structure: A switch statement on e.key would be more readable and maintainable than a series of if statements. The if (keyboard) check can also be done once at the beginning of the function.

Here is a suggested refactoring that applies these points:

  const keyboardHandler = useEvent((e: KeyboardEvent) => {
    if (!keyboard) {
      return;
    }

    switch (e.key) {
      case 'Escape':
        if (mergedClosable !== null) {
          e.stopPropagation();
          e.preventDefault();
          handleClose();
        }
        break;
      case 'ArrowLeft':
        if (mergedCurrent > 0) {
          e.preventDefault();
          onInternalChange(mergedCurrent - 1);
        }
        break;
      case 'ArrowRight':
        if (mergedCurrent < steps.length - 1) {
          e.preventDefault();
          onInternalChange(mergedCurrent + 1);
        }
        break;
      default:
        // Do nothing
        break;
    }
  });


useLayoutEffect(() => {
if (!mergedOpen) return;
window.addEventListener('keydown', keyboardHandler);
return () => {
window.removeEventListener('keydown', keyboardHandler);
};
}, [mergedOpen, keyboardHandler]);

// ========================= Render =========================
// Skip if not init yet
if (targetElement === undefined || !hasOpened) {
return null;
}

const handleClose = () => {
setMergedOpen(false);
onClose?.(mergedCurrent);
};

const getPopupElement = () => (
<TourStep
styles={styles}
Expand Down
1 change: 1 addition & 0 deletions src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'> {
style?: React.CSSProperties;
steps?: TourStepInfo[];
open?: boolean;
keyboard?: boolean;
defaultOpen?: boolean;
defaultCurrent?: number;
current?: number;
Expand Down