refactor: input component (#2999)

apps/web/src/components/affine/create-workspace-modal/index.tsx

@@ -14,7 +14,7 @@ import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
 import { useEffect } from 'react';
 import { useLayoutEffect } from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { openDisableCloudAlertModalAtom } from '../../../atoms';
 import { useAppHelper } from '../../../hooks/use-workspaces';
@@ -45,7 +45,6 @@ const NameWorkspaceContent = ({
   onClose,
 }: NameWorkspaceContentProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
-  const isComposition = useRef(false);
 
   const handleCreateWorkspace = useCallback(() => {
     onConfirmName(workspaceName);
@@ -53,7 +52,7 @@ const NameWorkspaceContent = ({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === 'Enter' && workspaceName && !isComposition.current) {
+      if (event.key === 'Enter' && workspaceName) {
         handleCreateWorkspace();
       }
     },
@@ -76,12 +75,6 @@ const NameWorkspaceContent = ({
         maxLength={64}
         minLength={0}
         onChange={setWorkspaceName}
-        onCompositionStart={() => {
-          isComposition.current = true;
-        }}
-        onCompositionEnd={() => {
-          isComposition.current = false;
-        }}
       />
       <div className={style.buttonGroup}>
         <Button

apps/web/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx

@@ -86,7 +86,6 @@ export const WorkspaceDeleteModal = ({
             onChange={setDeleteStr}
             data-testid="delete-workspace-input"
             placeholder={t['Placeholder of delete workspace']()}
-            value={deleteStr}
             width={315}
             height={42}
           />

apps/web/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -71,7 +71,7 @@ export const ProfilePanel: FC<{
         <Input
           width={280}
           height={32}
-          value={input}
+          defaultValue={input}
           data-testid="workspace-name-input"
           placeholder={t['Workspace Name']()}
           maxLength={64}

packages/component/src/components/page-list/view/create-collection.tsx

@@ -219,7 +219,7 @@ export const EditCollection = ({
           <Input
             data-testid="input-collection-title"
             placeholder="Untitled Collection"
-            value={value.name}
+            defaultValue={value.name}
             onChange={text =>
               onChange({
                 ...value,

packages/component/src/ui/input/input.tsx

@@ -1,7 +1,7 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
+import { useCompositionInput } from 'foxact/use-composition-input';
 import type {
-  ChangeEventHandler,
   CSSProperties,
   FocusEventHandler,
   ForwardedRef,
@@ -12,8 +12,10 @@ import { forwardRef, useCallback } from 'react';
 
 import { heightVar, inputStyle, widthVar } from './index.css';
 
-type inputProps = {
+type InputProps = {
-  value?: string;
+  // We don't have `value` props here,
+  //  see https://foxact.skk.moe/use-composition-input
+  defaultValue?: string | undefined;
   placeholder?: string;
   disabled?: boolean;
   width?: CSSProperties['width'];
@@ -24,12 +26,19 @@ type inputProps = {
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
   noBorder?: boolean;
-} & Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+} & Omit<
+  HTMLAttributes<HTMLInputElement>,
+  | 'onChange'
+  | 'value'
+  | 'defaultValue'
+  | 'onCompositionStart'
+  | 'onCompositionEnd'
+>;
 
-export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   {
     disabled,
-    value,
+    defaultValue,
     placeholder,
     maxLength,
     minLength,
@@ -39,15 +48,16 @@ export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
     noBorder = false,
     className,
     ...otherProps
-  }: inputProps,
+  }: InputProps,
   ref: ForwardedRef<HTMLInputElement>
 ) {
-  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+  const inputProps = useCompositionInput(
-    e => {
+    useCallback(
-      const { value } = e.target;
+      (value: string) => {
-      onChange && onChange(value);
+        onChange && onChange(value);
-    },
+      },
-    [onChange]
+      [onChange]
+    )
   );
 
   return (
@@ -60,15 +70,15 @@ export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
       data-no-border={noBorder}
       data-disabled={disabled}
       ref={ref}
-      value={value}
+      defaultValue={defaultValue}
       disabled={disabled}
       placeholder={placeholder}
       width={width}
       maxLength={maxLength}
       minLength={minLength}
-      onChange={handleChange}
       height={height}
       {...otherProps}
+      {...inputProps}
     />
   );
 });

plugins/copilot/src/UI/debug-content.tsx

@@ -12,7 +12,7 @@ export const DebugContent: PluginUIAdapter['debugContent'] = () => {
     <div>
       <span>OpenAI API Key:</span>
       <Input
-        value={key ?? ''}
+        defaultValue={key ?? undefined}
         onChange={useCallback(
           (newValue: string) => {
             setKey(newValue);