fix(core): handle composition event for Input component (#8351)

close AF-1065

packages/frontend/core/src/modules/create-workspace/views/dialog.tsx

@@ -15,7 +15,6 @@ import {
   WorkspacesService,
 } from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
-import type { KeyboardEvent } from 'react';
 import { useCallback, useLayoutEffect, useState } from 'react';
 
 import { AuthService } from '../../../modules/cloud';
@@ -76,14 +75,11 @@ const NameWorkspaceContent = ({
     );
   }, [enable, onConfirmName, workspaceName]);
 
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === 'Enter' && workspaceName) {
-        handleCreateWorkspace();
-      }
-    },
-    [handleCreateWorkspace, workspaceName]
-  );
+  const onEnter = useCallback(() => {
+    if (workspaceName) {
+      handleCreateWorkspace();
+    }
+  }, [handleCreateWorkspace, workspaceName]);
 
   // Currently, when we create a new workspace and upload an avatar at the same time,
   // an error occurs after the creation is successful: get blob 404 not found
@@ -117,7 +113,7 @@ const NameWorkspaceContent = ({
         <Input
           autoFocus
           data-testid="create-workspace-input"
-          onKeyDown={handleKeyDown}
+          onEnter={onEnter}
           placeholder={t['com.affine.nameWorkspace.placeholder']()}
           maxLength={64}
           minLength={0}

packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.tsx

@@ -1,4 +1,4 @@
-import { IconButton, observeResize } from '@affine/component';
+import { IconButton, observeResize, RowInput } from '@affine/component';
 import {
   ArrowDownSmallIcon,
   ArrowUpSmallIcon,
@@ -10,7 +10,6 @@ import { useLiveData, useService } from '@toeverything/infra';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import {
-  type ChangeEventHandler,
   type CompositionEventHandler,
   type KeyboardEventHandler,
   type SetStateAction,
@@ -102,9 +101,8 @@ export const FindInPageModal = () => {
     toggle(visible);
   }, [visible]);
 
-  const handleValueChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    e => {
-      const value = e.target.value;
+  const handleValueChange = useCallback(
+    (value: string) => {
       setValue(value);
       if (!composing) {
         findInPage.findInPage(value);
@@ -227,7 +225,7 @@ export const FindInPageModal = () => {
             >
               <SearchIcon className={styles.searchIcon} />
               <div className={styles.inputMain}>
-                <input
+                <RowInput
                   type="text"
                   autoFocus
                   value={value}