diff --git a/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx b/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx index 070c4fc3a1..fe15fd9f7a 100644 --- a/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx +++ b/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx @@ -18,7 +18,7 @@ import type { IDisposable, Nullable } from '@univerjs/core'; import type { ForwardedRef } from 'react'; import { ICommandService, IContextService, LocaleService } from '@univerjs/core'; import { Button, Checkbox, FormDualColumnLayout, FormLayout, Input, MessageType, Select } from '@univerjs/design'; -import { ILayoutService, IMessageService, useDependency, useObservable } from '@univerjs/ui'; +import { ILayoutService, IMessageService, useDebounceFn, useDependency, useObservable } from '@univerjs/ui'; import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react'; import { fromEvent } from 'rxjs'; import { ReplaceAllMatchesCommand, ReplaceCurrentMatchCommand } from '../../commands/commands/replace.command'; @@ -64,7 +64,9 @@ export const FindDialog = forwardRef(function FindDialogImpl(_props, ref) { commandService.executeCommand(OpenReplaceDialogOperation.id); }, [commandService]); - const onFindStringChange = useCallback((findString: string) => findReplaceService.changeFindString(findString), [findReplaceService]); + const onFindStringChange = useDebounceFn((findString: string) => { + return findReplaceService.changeFindString(findString); + }, 500); useFindInputFocus(findReplaceService, ref); @@ -77,7 +79,7 @@ export const FindDialog = forwardRef(function FindDialogImpl(_props, ref) { matchesPosition={matchesPosition} findReplaceService={findReplaceService} localeService={localeService} - findString={findString} + initialFindString={findString} onChange={onFindStringChange} />