fix: #42 caret doesn't show until with focus

pmndrs · Apr 19, 2024 · c63d89a · c63d89a
1 parent 4b33956
commit c63d89a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 26 deletions.
diff --git a/examples/uikit/src/App.tsx b/examples/uikit/src/App.tsx
@@ -1,4 +1,4 @@
-import { StrictMode, Suspense, useMemo, useRef, useState } from 'react'
+import { ComponentRef, StrictMode, Suspense, useMemo, useRef, useState } from 'react'
 import { Canvas } from '@react-three/fiber'
 import { Gltf, Box, PerspectiveCamera, RenderTexture } from '@react-three/drei'
 import { signal } from '@preact/signals-core'
@@ -27,6 +27,7 @@ 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)
   return (
     <Canvas style={{ height: '100dvh', touchAction: 'none' }} gl={{ localClippingEnabled: true }}>
       <StrictMode>
@@ -179,6 +180,7 @@ export default function App() {
               <Container
                 width={100}
                 height={100}
+                onClick={() => inputRef.current?.focus()}
                 positionType="absolute"
                 positionBottom="100%"
                 positionRight="100%"
@@ -187,6 +189,7 @@ export default function App() {
                 backgroundColor="red"
               ></Container>
               <Input
+                ref={inputRef}
                 backgroundColor="white"
                 width="100%"
                 height="100%"

diff --git a/packages/uikit/src/components/input.ts b/packages/uikit/src/components/input.ts
@@ -219,24 +219,24 @@ export function createInput(
   const disabled = computedProperty(mergedProperties, 'disabled', false)
 
   const element = createHtmlInputElement(valueSignal, selectionRange, onChange, multiline, disabled, initializers)
-  const focus = () => {
-    if (hasFocusSignal.peek()) {
+  const focus = (start?: number, end?: number, direction?: 'forward' | 'backward' | 'none') => {
+    const inputElement = element.peek()
+    if (inputElement == null) {
       return
     }
-    element.peek()?.focus()
+    if (!hasFocusSignal.peek()) {
+      inputElement.focus()
+    }
+    if (start != null && end != null) {
+      inputElement.setSelectionRange(start, end, direction)
+    }
+    selectionRange.value = [inputElement.selectionStart ?? 0, inputElement.selectionEnd ?? 0]
   }
   updateHasFocus(element, hasFocusSignal, initializers)
-  const selectionHandlers = computedSelectionHandlers(
-    flexState,
-    element,
-    instancedTextRef,
-    selectionRange,
-    focus,
-    disabled,
-  )
+  const selectionHandlers = computedSelectionHandlers(flexState, instancedTextRef, focus, disabled)
 
   return Object.assign(flexState, {
-    focus,
+    focus: () => focus(),
     root: parentContext.root,
     element,
     node: nodeSignal,
@@ -262,10 +262,8 @@ export function createInput(
 
 export function computedSelectionHandlers(
   flexState: FlexNodeState,
-  element: Signal<HTMLInputElement | HTMLTextAreaElement | undefined>,
   instancedTextRef: { current?: InstancedText },
-  selectionRange: Signal<Vector2Tuple | undefined>,
-  focus: () => void,
+  focus: (start?: number, end?: number, direction?: 'forward' | 'backward' | 'none') => void,
   disabled: Signal<boolean>,
 ) {
   return computed<EventHandlers | undefined>(() => {
@@ -283,11 +281,7 @@ export function computedSelectionHandlers(
         const charIndex = uvToCharIndex(flexState, e.uv, instancedTextRef.current)
         startCharIndex = charIndex
 
-        setTimeout(() => {
-          focus()
-          selectionRange.value = [charIndex, charIndex]
-          element.peek()?.setSelectionRange(charIndex, charIndex)
-        })
+        setTimeout(() => focus(charIndex, charIndex))
       },
       onPointerUp: (e) => {
         startCharIndex = undefined
@@ -306,11 +300,7 @@ export function computedSelectionHandlers(
         const end = Math.max(startCharIndex, charIndex)
         const direction = startCharIndex < charIndex ? 'forward' : 'backward'
 
-        setTimeout(() => {
-          focus()
-          selectionRange.value = [start, end]
-          element.peek()?.setSelectionRange(start, end, direction)
-        })
+        setTimeout(() => focus(start, end, direction))
       },
     }
   })