debounce user inputs to prevent character loss

Author: Archmonger

src/js/packages/@reactpy/client/src/components.tsx

@@ -82,16 +82,32 @@ function UserInputElement({ model }: { model: ReactPyVdom }): JSX.Element {
   const client = useContext(ClientContext);
   const props = createAttributes(model, client);
   const [value, setValue] = useState(props.value);
+  const lastUserValue = useRef(props.value);
+  const lastChangeTime = useRef(0);
 
   // honor changes to value from the client via props
-  useEffect(() => setValue(props.value), [props.value]);
+  useEffect(() => {
+    // If the new prop value matches what we last sent, we are in sync.
+    // If it differs, we only update if sufficient time has passed since user input,
+    // effectively debouncing server overrides during rapid typing.
+    const now = Date.now();
+    if (
+      props.value === lastUserValue.current ||
+      now - lastChangeTime.current > 200
+    ) {
+      setValue(props.value);
+    }
+  }, [props.value]);
 
   const givenOnChange = props.onChange;
   if (typeof givenOnChange === "function") {
     props.onChange = (event: TargetedEvent<any>) => {
       // immediately update the value to give the user feedback
       if (event.target) {
-        setValue((event.target as HTMLInputElement).value);
+        const newValue = (event.target as HTMLInputElement).value;
+        setValue(newValue);
+        lastUserValue.current = newValue;
+        lastChangeTime.current = Date.now();
       }
       // allow the client to respond (and possibly change the value)
       givenOnChange(event);

tests/test_core/test_events.py

@@ -586,3 +586,39 @@ async def add_top(event):
     await btn_b.click()  # This generates event for .../1
 
     assert clicked_items == ["B"]
+
+
+async def test_controlled_input_typing(display: DisplayFixture):
+    """
+    Test that a controlled input updates correctly even with rapid typing.
+    This validates that event queueing/processing order is maintained.
+    """
+
+    @reactpy.component
+    def ControlledInput():
+        value, set_value = use_state("")
+
+        def on_change(event):
+            set_value(event["target"]["value"])
+
+        return reactpy.html.input(
+            {
+                "value": value,
+                "onChange": on_change,
+                "id": "controlled-input",
+            }
+        )
+
+    await display.show(ControlledInput)
+
+    inp = await display.page.wait_for_selector("#controlled-input")
+
+    # Type a long string rapidly
+    target_text = "hello world this is a test"
+    await inp.type(target_text, delay=0)
+
+    # Wait a bit for all events to settle
+    await asyncio.sleep(0.5)
+
+    # Check the final value
+    assert (await inp.evaluate("node => node.value")) == target_text