Skip echoing client-originated values via bool flag on ValueElement

Add _value_from_client flag to ValueElement, set when LOOPBACK handles
client input. The outbox strips VALUE_PROP from updates when the flag
is True, preventing the server from echoing the value back. JS merges
incoming props with existing state so the omitted prop is preserved.

_to_dict() always returns full state for reconnection safety. The flag
resets on server-originated value changes (bindings, sanitize).

Implements the approach proposed by @falkoschindler in #5728.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: evnchn

nicegui/elements/mixins/value_element.py

@@ -31,6 +31,7 @@ def __init__(self, *,
                  ) -> None:
         super().__init__(**kwargs)
         self._send_update_on_value_change = True
+        self._value_from_client: bool = False
         self.set_value(value)
         self._props[self.VALUE_PROP] = self._value_to_model_value(value)
         self._props['loopback'] = self.LOOPBACK
@@ -39,6 +40,7 @@ def __init__(self, *,
         def handle_change(e: GenericEventArguments) -> None:
             self._send_update_on_value_change = self.LOOPBACK is True
             self.set_value(self._event_args_to_value(e))
+            self._value_from_client = self.LOOPBACK is True
             self._send_update_on_value_change = True
         self.on(f'update:{self.VALUE_PROP}', handle_change, [None], throttle=throttle)
 
@@ -124,6 +126,7 @@ def _handle_value_change(self, value: Any) -> None:
         with self._props.suspend_updates():
             self._props[self.VALUE_PROP] = self._value_to_model_value(value)
         if self._send_update_on_value_change:
+            self._value_from_client = False
             self.update()
         args = ValueChangeEventArguments(sender=self, client=self.client,
                                          value=self._value_to_event_value(value),

nicegui/outbox.py

@@ -81,6 +81,15 @@ def enqueue_message(self, message_type: MessageType, data: Payload, target_id: C
         self.messages.append((target_id, message_type, data))
         self._set_enqueue_event()
 
+    @staticmethod
+    def _build_element_dict(element: Element) -> dict[str, Any]:
+        """Build the update dict for an element, omitting VALUE_PROP if the value came from the client."""
+        element_dict = element._to_dict()  # pylint: disable=protected-access
+        if getattr(element, '_value_from_client', False):
+            element_dict.get('props', {}).pop(getattr(element, 'VALUE_PROP', None), None)  # type: ignore[arg-type]
+            element._value_from_client = False  # type: ignore[attr-defined]  # pylint: disable=protected-access
+        return element_dict
+
     async def loop(self) -> None:
         """Send updates and messages to all clients in an endless loop."""
         self._enqueue_event = asyncio.Event()
@@ -104,7 +113,7 @@ async def loop(self) -> None:
                 coros = []
                 if self.updates:
                     data = {
-                        element_id: None if element is deleted else element._to_dict()  # type: ignore  # pylint: disable=protected-access
+                        element_id: None if element is deleted else self._build_element_dict(element)  # type: ignore[arg-type]
                         for element_id, element in self.updates.items()
                     }
                     js_components = [

nicegui/static/nicegui.js

@@ -500,6 +500,10 @@ function createApp(elements, options) {
               delete this.elements[id];
               continue;
             }
+            const existing = this.elements[id];
+            if (existing && element.props) {
+              element.props = { ...existing.props, ...element.props };
+            }
             replaceUndefinedAttributes(element);
             this.elements[id] = element;
           }

tests/test_value_from_client.py

@@ -0,0 +1,73 @@
+from nicegui import ui
+from nicegui.testing import Screen
+
+
+def test_server_set_value_includes_value_in_update(screen: Screen):
+    @ui.page('/')
+    def page():
+        inp = ui.input(value='initial')
+        # Server-side change: flag should be False
+        inp.value = 'from_server'
+        assert inp._value_from_client is False
+        # _to_dict always includes VALUE_PROP
+        d = inp._to_dict()
+        assert 'props' in d
+        assert inp.VALUE_PROP in d['props']
+        assert d['props'][inp.VALUE_PROP] == 'from_server'
+        ui.label('server_test_passed')
+
+    screen.open('/')
+    screen.should_contain('server_test_passed')
+
+
+def test_flag_set_true_when_simulating_client_change(screen: Screen):
+    @ui.page('/')
+    def page():
+        inp = ui.input(value='initial')
+        inp._value_from_client = True
+        d = inp._to_dict()
+        assert inp.VALUE_PROP in d['props']
+        ui.label('flag_test_passed')
+
+    screen.open('/')
+    screen.should_contain('flag_test_passed')
+
+
+def test_to_dict_always_includes_value(screen: Screen):
+    @ui.page('/')
+    def page():
+        inp = ui.input(value='hello')
+        inp._value_from_client = True
+        d = inp._to_dict()
+        assert inp.VALUE_PROP in d['props']
+        assert d['props'][inp.VALUE_PROP] == 'hello'
+        ui.label('reconnect_safe_passed')
+
+    screen.open('/')
+    screen.should_contain('reconnect_safe_passed')
+
+
+def test_flag_false_by_default(screen: Screen):
+    @ui.page('/')
+    def page():
+        inp = ui.input(value='test')
+        assert inp._value_from_client is False
+        select = ui.select(options=['a', 'b'], value='a')
+        assert select._value_from_client is False
+        ui.label('default_flag_passed')
+
+    screen.open('/')
+    screen.should_contain('default_flag_passed')
+
+
+def test_loopback_true_server_change_keeps_flag_false(screen: Screen):
+    @ui.page('/')
+    def page():
+        select = ui.select(options=['a', 'b', 'c'], value='a')
+        assert select.LOOPBACK is True
+        select.value = 'b'
+        assert select._value_from_client is False
+        ui.label('loopback_test_passed')
+
+    screen.open('/')
+    screen.should_contain('loopback_test_passed')