Merge pull request #306 from FI-Mihej/#287-Text-input-example-drops-keys

#287 Text input example drops keys

nicegui/elements/color_input.py

@@ -7,6 +7,7 @@ from .mixins.value_element import ValueElement
 
 
 class ColorInput(ValueElement):
+    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,6 +5,7 @@ from .mixins.value_element import ValueElement
 
 
 class Input(ValueElement):
+    LOOPBACK = False
 
     def __init__(self,
                  label: Optional[str] = None, *,

nicegui/elements/mixins/value_element.py

@@ -8,12 +8,14 @@ from ...events import ValueChangeEventArguments, handle_event
 class ValueElement(Element):
     VALUE_PROP = 'model-value'
     EVENT_ARGS = ['value']
+    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:
@@ -38,7 +40,8 @@ class ValueElement(Element):
 
     def on_value_change(self, value: Any) -> None:
         self._props[self.VALUE_PROP] = self._value_to_model_value(value)
-        self.update()
+        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,6 +4,7 @@ from .mixins.value_element import ValueElement
 
 
 class Number(ValueElement):
+    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;