feat #34: added blur function and html element to input internals

examples/uikit/src/App.tsx

@@ -1,4 +1,4 @@
-import { ComponentRef, StrictMode, Suspense, useEffect, useMemo, useRef, useState } from 'react'
+import { StrictMode, Suspense, useEffect, useMemo, useRef, useState } from 'react'
 import { Canvas, useThree } from '@react-three/fiber'
 import { Box, OrbitControls, OrthographicCamera, RenderTexture } from '@react-three/drei'
 import { signal } from '@preact/signals-core'
@@ -18,6 +18,7 @@ import {
   ImageProperties,
   Video,
   useMeasureText,
+  InputInternals,
 } from '@react-three/uikit'
 import { Texture } from 'three'
 import { Skeleton } from '../../../packages/kits/default/src/skeleton.js'
@@ -30,10 +31,25 @@ export default function App() {
   const x = useMemo(() => signal<string | undefined>('red'), [])
   const t = useMemo(() => signal('X X\nX X'), [])
   const ref = useRef<ComponentInternals<ImageProperties>>(null)
-  const inputRef = useRef<ComponentRef<typeof Input>>(null)
+  const [input, setInput] = useState<InputInternals | null>(null)
   const videoRef = useRef<HTMLVideoElement | undefined>()
   const [videoel, setVideoEl] = useState<HTMLVideoElement | undefined>()
 
+  useEffect(() => {
+    const x = input?.element.peek()
+    if (x == null) {
+      return
+    }
+    const keydown = (e: Event) => {
+      if ('key' in e && e.key != 'Enter') {
+        return
+      }
+      x.blur()
+    }
+    x.addEventListener('keydown', keydown)
+    return () => x.removeEventListener('keydown', keydown)
+  }, [input])
+
   useEffect(() => setVideoEl(videoRef.current), [])
 
   return (
@@ -242,7 +258,7 @@ export default function App() {
                 <Container
                   width={100}
                   height={100}
-                  onClick={() => inputRef.current?.focus()}
+                  onClick={() => input?.focus()}
                   positionType="absolute"
                   positionBottom="100%"
                   positionRight="100%"
@@ -251,7 +267,7 @@ export default function App() {
                   backgroundColor="red"
                 ></Container>
                 <Input
-                  ref={inputRef}
+                  ref={setInput}
                   onFocusChange={(focus) => console.log('focus change', focus)}
                   backgroundColor="white"
                   width="100%"

packages/react/src/input.tsx

@@ -19,6 +19,8 @@ import { useFontFamilies } from './font.js'
 export type InputInternals = ComponentInternals<BaseInputProperties & EventHandlers> & {
   current: ReadonlySignal<string>
   focus: () => void
+  blur: () => void
+  element: ReadonlySignal<HTMLInputElement | HTMLTextAreaElement | undefined>
 } & PointerEventsProperties
 
 export type InputProperties = BaseInputProperties &
@@ -63,8 +65,13 @@ export const Input: (props: InputProperties & RefAttributes<InputInternals>) =>
       internals,
       internals.interactionPanel,
       useMemo(
-        () => ({ focus: internals.focus, current: internals.valueSignal }),
-        [internals.focus, internals.valueSignal],
+        () => ({
+          focus: internals.focus,
+          blur: internals.blur,
+          current: internals.valueSignal,
+          element: internals.element,
+        }),
+        [internals.focus, internals.blur, internals.valueSignal, internals.element],
       ),
     )
 

packages/uikit/src/components/input.ts

@@ -274,6 +274,14 @@ export function createInput(
     }
     selectionRange.value = [inputElement.selectionStart ?? 0, inputElement.selectionEnd ?? 0]
   }
+  const blur = () => {
+    const inputElement = element.peek()
+    if (inputElement == null) {
+      return
+    }
+    inputElement.blur()
+    selectionRange.value = undefined
+  }
   setupUpdateHasFocus(element, hasFocusSignal, initializers, (hasFocus: boolean) => {
     properties.peek()?.onFocusChange?.(hasFocus)
     style.peek()?.onFocusChange?.(hasFocus)
@@ -284,7 +292,8 @@ export function createInput(
     isClipped,
     mergedProperties,
     valueSignal,
-    focus: () => focus(),
+    focus,
+    blur,
     root: parentContext.root,
     element,
     node: nodeSignal,