fix: composition input

Author: Innei

src/components/ui/input/Input.tsx

@@ -1,15 +1,19 @@
 import { forwardRef } from 'react'
 import type { DetailedHTMLProps, InputHTMLAttributes } from 'react'
 
+import { useInputComposition } from '~/hooks/common/use-input-composition'
 import { clsxm } from '~/lib/helper'
 
+// This composition handler is not perfect
+// @see https://foxact.skk.moe/use-composition-input
 export const Input = forwardRef<
   HTMLInputElement,
   Omit<
     DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     'ref'
   >
 >(({ className, ...props }, ref) => {
+  const inputProps = useInputComposition(props)
   return (
     <input
       ref={ref}
@@ -21,6 +25,7 @@ export const Input = forwardRef<
         className,
       )}
       {...props}
+      {...inputProps}
     />
   )
 })

src/components/ui/input/TextArea.tsx

@@ -7,6 +7,7 @@ import type {
 } from 'react'
 
 import { useIsMobile } from '~/atoms'
+import { useInputComposition } from '~/hooks/common/use-input-composition'
 import { clsxm } from '~/lib/helper'
 
 export const TextArea = forwardRef<
@@ -30,6 +31,7 @@ export const TextArea = forwardRef<
   )
   const background = useMotionTemplate`radial-gradient(320px circle at ${mouseX}px ${mouseY}px, var(--spotlight-color) 0%, transparent 85%)`
   const isMobile = useIsMobile()
+  const inputProps = useInputComposition(props)
   return (
     <div
       className="group relative h-full [--spotlight-color:hsl(var(--a)_/_0.05)]"
@@ -51,6 +53,7 @@ export const TextArea = forwardRef<
           className,
         )}
         {...rest}
+        {...inputProps}
       />
 
       {children}

src/hooks/common/use-input-composition.ts

@@ -0,0 +1,52 @@
+import { useCallback, useRef } from 'react'
+import type { CompositionEventHandler } from 'react'
+
+export const useInputComposition = (
+  props:
+    | React.DetailedHTMLProps<
+        React.InputHTMLAttributes<HTMLInputElement>,
+        HTMLInputElement
+      >
+    | React.DetailedHTMLProps<
+        React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+      >,
+) => {
+  const { onKeyDown, onCompositionStart, onCompositionEnd } = props
+
+  const isCompositionRef = useRef(false)
+
+  const handleCompositionStart: CompositionEventHandler<any> = useCallback(
+    (e) => {
+      isCompositionRef.current = true
+      onCompositionStart?.(e)
+    },
+    [onCompositionStart],
+  )
+
+  const handleCompositionEnd: CompositionEventHandler<any> = useCallback(
+    (e) => {
+      isCompositionRef.current = false
+      onCompositionEnd?.(e)
+    },
+    [onCompositionEnd],
+  )
+
+  const handleKeyDown: React.KeyboardEventHandler<any> = useCallback(
+    (e) => {
+      onKeyDown?.(e)
+
+      if (isCompositionRef.current) {
+        e.stopPropagation()
+        return
+      }
+    },
+    [onKeyDown],
+  )
+
+  return {
+    onCompositionEnd: handleCompositionEnd,
+    onCompositionStart: handleCompositionStart,
+    onKeyDown: handleKeyDown,
+  }
+}