From e891e70d18a6d54d28f59605572edde434dd06d2 Mon Sep 17 00:00:00 2001
From: Linkodt <973672492@qq.com>
Date: Thu, 2 Oct 2025 15:02:27 +0800
Subject: [PATCH 1/3] feat(Tour): feat: support keyboard operation

---
 docs/demo/keyboard.md      |  8 ++++++
 docs/examples/keyboard.tsx | 52 ++++++++++++++++++++++++++++++++++++++
 src/Tour.tsx               | 52 ++++++++++++++++++++++++++++++++++----
 src/interface.ts           |  1 +
 4 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 docs/demo/keyboard.md
 create mode 100644 docs/examples/keyboard.tsx

diff --git a/docs/demo/keyboard.md b/docs/demo/keyboard.md
new file mode 100644
index 0000000..6dee400
--- /dev/null
+++ b/docs/demo/keyboard.md
@@ -0,0 +1,8 @@
+---
+title: keyboard
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/keyboard.tsx"></code>
diff --git a/docs/examples/keyboard.tsx b/docs/examples/keyboard.tsx
new file mode 100644
index 0000000..2dc8a8c
--- /dev/null
+++ b/docs/examples/keyboard.tsx
@@ -0,0 +1,52 @@
+import React, { useRef } from 'react';
+import Tour from '../../src/index';
+import './basic.less';
+
+const App = () => {
+  const firstBtnRef = useRef<HTMLButtonElement>(null);
+  const secondBtnRef = useRef<HTMLButtonElement>(null);
+  const thirdBtnRef = useRef<HTMLButtonElement>(null);
+  return (
+    <React.StrictMode>
+    <div style={{ margin: 20 }}>
+      <div>
+        <button
+          className="ant-target"
+          ref={firstBtnRef}
+        >
+          One
+        </button>
+        <button className="ant-target" ref={secondBtnRef}>
+          Two
+        </button>
+        <button className="ant-target" ref={thirdBtnRef}>
+          Three
+        </button>
+      </div>
+
+      <div style={{ height: 200 }} />
+
+      <Tour
+        defaultCurrent={0}
+        keyboard={true}
+        steps={[
+          {
+            title: 'One',
+            target: () => firstBtnRef.current,
+          },
+          {
+            title: 'Two',
+            target: () => secondBtnRef.current,
+          },
+          {
+            title: 'Three',
+            target: () => thirdBtnRef.current,
+          },
+        ]}
+      />
+    </div>
+    </React.StrictMode>
+  );
+};
+
+export default App;
diff --git a/src/Tour.tsx b/src/Tour.tsx
index 7c4afeb..073647d 100644
--- a/src/Tour.tsx
+++ b/src/Tour.tsx
@@ -58,6 +58,7 @@ const Tour: React.FC<TourProps> = props => {
     className,
     style,
     getPopupContainer,
+    keyboard = false,
     ...restProps
   } = props;
 
@@ -157,17 +158,58 @@ const Tour: React.FC<TourProps> = props => {
     return getPlacements(arrowPointAtCenter);
   }, [builtinPlacements, arrowPointAtCenter]);
 
+  // ================= close ========================
+  const handleClose = () => {
+    setMergedOpen(false);
+    onClose?.(mergedCurrent);
+  };
+
+  // ================= Keyboard Navigation ==============
+  const handleKeyDown = React.useCallback((e: KeyboardEvent) => {
+    if (!mergedOpen) {
+      return;
+    }
+    if (e.key === 'ArrowLeft') {
+      if (mergedCurrent <= 0) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      onInternalChange(mergedCurrent - 1);
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      if (mergedCurrent >= steps.length - 1) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      onInternalChange(mergedCurrent + 1);
+      return;
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClose();
+      return;
+    }
+  }, [mergedCurrent, mergedOpen, steps.length]);
+  
+  React.useEffect(() => {
+    if (keyboard) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, keyboard]);
+
   // ========================= Render =========================
   // Skip if not init yet
   if (targetElement === undefined || !hasOpened) {
     return null;
   }
 
-  const handleClose = () => {
-    setMergedOpen(false);
-    onClose?.(mergedCurrent);
-  };
-
   const getPopupElement = () => (
     <TourStep
       styles={styles}
diff --git a/src/interface.ts b/src/interface.ts
index ec02414..d05f2a8 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -89,4 +89,5 @@ export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'> {
         arrowPointAtCenter?: boolean;
       }) => TriggerProps['builtinPlacements']);
   disabledInteraction?: boolean;
+  keyboard?: boolean;
 }

From 5658930481aadc0e9cccb31a87a71e2e2faa65a7 Mon Sep 17 00:00:00 2001
From: Linkodt <973672492@qq.com>
Date: Thu, 2 Oct 2025 15:37:01 +0800
Subject: [PATCH 2/3] feat(Tour): feat: support keyboard operation

---
 src/Tour.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Tour.tsx b/src/Tour.tsx
index 073647d..e9904cd 100644
--- a/src/Tour.tsx
+++ b/src/Tour.tsx
@@ -165,6 +165,7 @@ const Tour: React.FC<TourProps> = props => {
   };
 
   // ================= Keyboard Navigation ==============
+  const keyboardController = React.useRef(new AbortController());
   const handleKeyDown = React.useCallback((e: KeyboardEvent) => {
     if (!mergedOpen) {
       return;
@@ -193,14 +194,18 @@ const Tour: React.FC<TourProps> = props => {
       handleClose();
       return;
     }
-  }, [mergedCurrent, mergedOpen, steps.length]);
+  }, [mergedCurrent, mergedOpen, steps.length, handleClose, onInternalChange]);
   
   React.useEffect(() => {
+    keyboardController.current.abort();
+    keyboardController.current = new AbortController();
     if (keyboard) {
-      document.addEventListener('keydown', handleKeyDown);
+      document.addEventListener('keydown', handleKeyDown, {
+        signal: keyboardController.current.signal,
+      });
     }
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      keyboardController.current.abort();
     };
   }, [handleKeyDown, keyboard]);
 

From 2a6a8fd694875484f98b0c0f904fac100e9d79ae Mon Sep 17 00:00:00 2001
From: Linkodt <973672492@qq.com>
Date: Sat, 4 Oct 2025 16:25:05 +0800
Subject: [PATCH 3/3] feat(Tour): feat: support keyboard operation

---
 src/Tour.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Tour.tsx b/src/Tour.tsx
index e9904cd..b8ece97 100644
--- a/src/Tour.tsx
+++ b/src/Tour.tsx
@@ -189,6 +189,9 @@ const Tour: React.FC<TourProps> = props => {
       return;
     }
     if (e.key === 'Escape') {
+      if (!mergedClosable) {
+        return;
+      }
       e.preventDefault();
       e.stopPropagation();
       handleClose();