#287 improve solution with inspiration from PR #306

nicegui/elements/color_input.py

@@ -7,7 +7,7 @@
 
 
 class ColorInput(ValueElement):
-    UPDATE_ONE_CHANGE = False
+    LOOPBACK = False
 
     def __init__(self, label: Optional[str] = None, *,
                  placeholder: Optional[str] = None, value: str = '', on_change: Optional[Callable] = None) -> None:

nicegui/elements/input.py

@@ -5,7 +5,7 @@
 
 
 class Input(ValueElement):
-    UPDATE_ONE_CHANGE = False
+    LOOPBACK = False
 
     def __init__(self,
                  label: Optional[str] = None, *,

nicegui/elements/mixins/value_element.py

@@ -8,22 +8,20 @@
 class ValueElement(Element):
     VALUE_PROP = 'model-value'
     EVENT_ARGS = ['value']
-    UPDATE_ONE_CHANGE = True
+    LOOPBACK = True
     value = BindableProperty(on_change=lambda sender, value: sender.on_value_change(value))
 
     def __init__(self, *, value: Any, on_value_change: Optional[Callable], throttle: float = 0, **kwargs) -> None:
         super().__init__(**kwargs)
         self.set_value(value)
         self._props[self.VALUE_PROP] = self._value_to_model_value(value)
+        self._props['loopback'] = self.LOOPBACK
         self.change_handler = on_value_change
 
         def handle_change(msg: Dict) -> None:
             self.set_value(self._msg_to_value(msg))
         self.on(f'update:{self.VALUE_PROP}', handle_change, self.EVENT_ARGS, throttle=throttle)
 
-        if not self.UPDATE_ONE_CHANGE:
-            self.on('blur', lambda _: self.update())
-
     def bind_value_to(self, target_object: Any, target_name: str = 'value', forward: Callable = lambda x: x):
         bind_to(self, 'value', target_object, target_name, forward)
         return self
@@ -42,7 +40,7 @@ def set_value(self, value: Any) -> None:
 
     def on_value_change(self, value: Any) -> None:
         self._props[self.VALUE_PROP] = self._value_to_model_value(value)
-        if self.UPDATE_ONE_CHANGE:
+        if self.LOOPBACK:
             self.update()
         args = ValueChangeEventArguments(sender=self, client=self.client, value=self._value_to_event_value(value))
         handle_event(self.change_handler, args)

nicegui/elements/number.py

@@ -4,7 +4,7 @@
 
 
 class Number(ValueElement):
-    UPDATE_ONE_CHANGE = False
+    LOOPBACK = False
 
     def __init__(self,
                  label: Optional[str] = None, *,

nicegui/templates/index.html

@@ -61,6 +61,9 @@
             const args = all ? e : Object.fromEntries(event.args.map(a => [a, e[a]]));
             const emitter = () => window.socket.emit("event", {id: element.id, type: event.listener_type, args});
             throttle(emitter, event.throttle, event.listener_type);
+            if (element.props["loopback"] === False && event.type == "update:model-value") {
+              element.props["model-value"] = args;
+            }
           };
           handler = Vue.withModifiers(handler, event.modifiers);
           handler = event.keys.length ? Vue.withKeys(handler, event.keys) : handler;