fix: reconciler sending echoed value back for UiInput component (#1331)

* fix: reconciler sending echoed value back for UiInput component

* update snapshots

* change fix

Author: nicoecheza

packages/@dcl/react-ecs/src/reconciler/index.ts

@@ -60,6 +60,9 @@ export function createReconciler(
   // Store the onChange callbacks to be runned every time a Result has changed
   const changeEvents = new Map<Entity, Map<number, OnChangeState | undefined>>()
   const clickEvents = new Map<Entity, Map<PointerEventType, Callback>>()
+  // Track the last value reported by the renderer for each input entity,
+  // so we can avoid echoing it back and causing keystroke drops.
+  const lastInputResultValues = new Map<Entity, string | undefined>()
   // Initialize components
   const UiTransform = components.UiTransform(engine)
   const UiText = components.UiText(engine)
@@ -175,6 +178,18 @@ export function createReconciler(
       delete (props as any).onSubmit
     }
 
+    // Prevent keystroke drops: when React echoes back the same value the renderer
+    // reported, strip it from the props so the component isn't marked dirty for it.
+    // This avoids sending a stale value that overwrites what the user is currently typing.
+    if (
+      componentName === 'uiInput' &&
+      'value' in props &&
+      lastInputResultValues.has(instance.entity) &&
+      (props as any).value === lastInputResultValues.get(instance.entity)
+    ) {
+      delete (props as any).value
+    }
+
     // We check if there is any key pending to be changed to avoid updating the existing component
     if (!Object.keys(props).length) {
       return
@@ -192,6 +207,7 @@ export function createReconciler(
   function removeChildEntity(instance: Instance) {
     changeEvents.delete(instance.entity)
     clickEvents.delete(instance.entity)
+    lastInputResultValues.delete(instance.entity)
     engine.removeEntity(instance.entity)
     for (const child of instance._child) {
       removeChildEntity(child)
@@ -252,6 +268,9 @@ export function createReconciler(
       const resultComponentId =
         componentId === UiDropdown.componentId ? UiDropdownResult.componentId : UiInputResult.componentId
       engine.getComponent<PBUiInputResult | PBUiDropdownResult>(resultComponentId).onChange(entity, (value) => {
+        if (resultComponentId === UiInputResult.componentId) {
+          lastInputResultValues.set(entity, value?.value as string | undefined)
+        }
         if ((value as PBUiInputResult)?.isSubmit) {
           const onSubmit = changeEvents.get(entity)?.get(componentId)?.onSubmitCallback
           onSubmit && onSubmit(value?.value)

test/react-ecs/input.spec.tsx

@@ -4,6 +4,66 @@ import { ReactEcs, Input } from '../../packages/@dcl/react-ecs/src'
 import { Color4 } from '../../packages/@dcl/sdk/math'
 import { setupEngine } from './utils'
 
+describe('Ui Input - smooth typing', () => {
+  it('should not echo back the same value the renderer reported, preventing keystroke drops', async () => {
+    const { engine, uiRenderer } = setupEngine()
+    const UiInput = components.UiInput(engine)
+    const UiInputResult = components.UiInputResult(engine)
+    const uiEntity = ((engine.addEntity() as number) + 1) as Entity
+
+    let inputValue = ''
+    const ui = () => (
+      <Input
+        uiTransform={{ width: 100 }}
+        value={inputValue}
+        onChange={(val) => { inputValue = val ?? '' }}
+        placeholder="type here"
+      />
+    )
+    uiRenderer.setUiRenderer(ui)
+    await engine.update(1)
+
+    // Simulate the renderer reporting that the user typed "hello"
+    UiInputResult.create(uiEntity, { value: 'hello' })
+    await engine.update(1)
+    expect(inputValue).toBe('hello')
+
+    // React re-renders with value="hello" (echoing it back).
+    // The reconciler should strip the echoed value from the update,
+    // so the component's value on the ECS side stays unchanged (not overwritten).
+    const valueBefore = UiInput.get(uiEntity).value
+    await engine.update(1)
+    expect(UiInput.get(uiEntity).value).toBe(valueBefore)
+  })
+
+  it('should still allow programmatic value changes that differ from renderer state', async () => {
+    const { engine, uiRenderer } = setupEngine()
+    const UiInput = components.UiInput(engine)
+    const UiInputResult = components.UiInputResult(engine)
+    const uiEntity = ((engine.addEntity() as number) + 1) as Entity
+
+    let inputValue = ''
+    const ui = () => (
+      <Input
+        uiTransform={{ width: 100 }}
+        value={inputValue}
+        onChange={(val) => { inputValue = val ?? '' }}
+        placeholder="type here"
+      />
+    )
+    uiRenderer.setUiRenderer(ui)
+    await engine.update(1)
+
+    UiInputResult.create(uiEntity, { value: 'hello' })
+    await engine.update(1)
+    expect(inputValue).toBe('hello')
+
+    inputValue = ''
+    await engine.update(1)
+    expect(UiInput.get(uiEntity).value).toBe('')
+  })
+})
+
 describe('Ui Listeners React Ecs', () => {
   it('should run onChange if it was a keyboard event', async () => {
     const { engine, uiRenderer } = setupEngine()

test/snapshots/production-bundles/ui.ts.crdt

@@ -1,4 +1,4 @@
-SCENE_COMPILED_JS_SIZE_PROD=379.9k bytes
+SCENE_COMPILED_JS_SIZE_PROD=380.1k bytes
 (start empty vm 0.21.0-3680274614.commit-1808aa1)
   OPCODES ~= 0k
   MALLOC_COUNT = 1005
@@ -9,7 +9,7 @@ EVAL test/snapshots/production-bundles/ui.js
   REQUIRE: ~system/EngineApi
   REQUIRE: ~system/EngineApi
   OPCODES ~= 76k
-  MALLOC_COUNT = 20933
+  MALLOC_COUNT = 20938
   ALIVE_OBJS_DELTA ~= 4.21k
 CALL onStart()
   OPCODES ~= 0k
@@ -48,7 +48,7 @@ CALL onUpdate(0)
   Scene: PUT_COMPONENT e=0x209 c=1093 t=1 data={"placeholder":"","disabled":false}
   Scene: PUT_COMPONENT e=0x201 c=1094 t=1 data={"acceptEmpty":false,"options":["BOEDO","CASLA"],"selectedIndex":0,"disabled":false,"color":{"r":1,"g":0,"b":0,"a":1}}
   OPCODES ~= 143k
-  MALLOC_COUNT = 715
+  MALLOC_COUNT = 718
   ALIVE_OBJS_DELTA ~= 0.25k
 CALL onUpdate(0.1)
   Scene: PUT_COMPONENT e=0x200 c=1 t=2 data={"position":{"x":8,"y":1,"z":8},"rotation":{"x":0,"y":0.008726535364985466,"z":0,"w":0.9999619126319885},"scale":{"x":1,"y":1,"z":1},"parent":0}
@@ -65,4 +65,4 @@ CALL onUpdate(0.1)
   OPCODES ~= 67k
   MALLOC_COUNT = 0
   ALIVE_OBJS_DELTA ~= 0.00k
-  MEMORY_USAGE_COUNT ~= 1790.79k bytes
+  MEMORY_USAGE_COUNT ~= 1791.46k bytes