From 1d5df3d68b94cc5eb523c3c79cd2ff71a49a945d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E7=86=B1?= <sonne@asaki.me>
Date: Fri, 25 Jul 2025 21:25:54 +0800
Subject: [PATCH] feat(find-replace): enhance SearchInput component with
 keyboard navigation (#5589)

---
 .../controllers/find-replace.controller.ts    |  4 +-
 .../src/views/dialog/FindReplaceDialog.tsx    |  1 -
 .../src/views/dialog/SearchInput.tsx          | 44 ++++++++++++++-----
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/find-replace/src/controllers/find-replace.controller.ts b/packages/find-replace/src/controllers/find-replace.controller.ts
index 0f0c2415b1..45deed5ce3 100644
--- a/packages/find-replace/src/controllers/find-replace.controller.ts
+++ b/packages/find-replace/src/controllers/find-replace.controller.ts
@@ -18,7 +18,6 @@ import type { IDisposable, Nullable } from '@univerjs/core';
 import {
     ICommandService,
     Inject,
-    Injector,
     IUniverInstanceService,
     LocaleService,
     RxDisposable,
@@ -63,8 +62,7 @@ export class FindReplaceController extends RxDisposable {
         @IDialogService private readonly _dialogService: IDialogService,
         @ILayoutService private readonly _layoutService: ILayoutService,
         @Inject(LocaleService) private readonly _localeService: LocaleService,
-        @Inject(ComponentManager) private readonly _componentManager: ComponentManager,
-        @Inject(Injector) private readonly _injector: Injector
+        @Inject(ComponentManager) private readonly _componentManager: ComponentManager
     ) {
         super();
 
diff --git a/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx b/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx
index aac4fd4f51..f4c278d405 100644
--- a/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx
+++ b/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx
@@ -74,7 +74,6 @@ export const FindDialog = forwardRef(function FindDialogImpl(_props, ref) {
         <>
             <SearchInput
                 findCompleted={findCompleted}
-                className="univer-find-input"
                 matchesCount={matchesCount}
                 matchesPosition={matchesPosition}
                 findReplaceService={findReplaceService}
diff --git a/packages/find-replace/src/views/dialog/SearchInput.tsx b/packages/find-replace/src/views/dialog/SearchInput.tsx
index f224317c69..6216bb8652 100644
--- a/packages/find-replace/src/views/dialog/SearchInput.tsx
+++ b/packages/find-replace/src/views/dialog/SearchInput.tsx
@@ -16,6 +16,7 @@
 
 import type { LocaleService } from '@univerjs/core';
 import type { IInputProps } from '@univerjs/design';
+import type { KeyboardEvent } from 'react';
 import type { IFindReplaceService } from '../../services/find-replace.service';
 import { Input, Pager } from '@univerjs/design';
 import { useState } from 'react';
@@ -30,7 +31,17 @@ export interface ISearchInputProps extends Pick<IInputProps, 'onFocus' | 'onBlur
 }
 
 export function SearchInput(props: ISearchInputProps) {
-    const { findCompleted: findComplete, localeService, matchesCount, matchesPosition, initialFindString, findReplaceService, onChange, ...rest } = props;
+    const {
+        findCompleted: findComplete,
+        localeService,
+        matchesCount,
+        matchesPosition,
+        initialFindString,
+        findReplaceService,
+        onChange,
+        ...rest
+    } = props;
+
     const [value, setValue] = useState(initialFindString);
     const noResult = findComplete && matchesCount === 0;
     const text = noResult
@@ -39,6 +50,24 @@ export function SearchInput(props: ISearchInputProps) {
             ? ' '
             : undefined;
 
+    function handleChangePosition(newIndex: number) {
+        if (matchesPosition === matchesCount && newIndex === 1) {
+            findReplaceService.moveToNextMatch();
+        } else if (matchesPosition === 1 && newIndex === matchesCount) {
+            findReplaceService.moveToPreviousMatch();
+        } else if (newIndex < matchesPosition) {
+            findReplaceService.moveToPreviousMatch();
+        } else {
+            findReplaceService.moveToNextMatch();
+        }
+    }
+
+    function handleEnter(event: KeyboardEvent<HTMLInputElement>) {
+        if (event.key === 'Enter') {
+            handleChangePosition(matchesPosition + 1);
+        }
+    }
+
     return (
         <div className="univer-relative univer-flex univer-items-center univer-gap-2" onDrag={(e) => e.stopPropagation()}>
             <Input
@@ -50,23 +79,14 @@ export function SearchInput(props: ISearchInputProps) {
                     setValue(value);
                     onChange?.(value);
                 }}
+                onKeyDown={handleEnter}
                 slot={(
                     <Pager
                         loop
                         text={text}
                         value={matchesPosition}
                         total={matchesCount}
-                        onChange={(newIndex) => {
-                            if (matchesPosition === matchesCount && newIndex === 1) {
-                                findReplaceService.moveToNextMatch();
-                            } else if (matchesPosition === 1 && newIndex === matchesCount) {
-                                findReplaceService.moveToPreviousMatch();
-                            } else if (newIndex < matchesPosition) {
-                                findReplaceService.moveToPreviousMatch();
-                            } else {
-                                findReplaceService.moveToNextMatch();
-                            }
-                        }}
+                        onChange={handleChangePosition}
                     />
                 )}
                 {...rest}