Add "Send after Delay" option to number input widget

nodes/widgets/locales/de/ui_number_input.json

@@ -15,8 +15,10 @@
             "passThrough": "Wenn <code>msg</code> am Eingang ankommt, an den Ausgang weiterleiten:",
             "clearable": "Zahleneingabe mit Schaltfläche löschen",
             "sendMessageOn": "Nachricht senden bei:",
+            "delay": "Verzögerung",
             "focusLeave": "Fokus verlassen",
             "pressEnter": "Enter drücken",
+            "delayUnit": "(ms)",
             "whenChanged": "Bei Änderung senden:",
             "payload": "Nutzlast",
             "currentValue": "Aktueller Wert",

nodes/widgets/locales/en-US/ui_number_input.json

@@ -15,8 +15,10 @@
             "passThrough": "If <code>msg</code> arrives on input, pass through to output:",
             "clearable": "Clear number input with button",
             "sendMessageOn": "Send message on:",
+            "delay": "Delay",
             "focusLeave": "Focus Leave",
             "pressEnter": "Press Enter",
+            "delayUnit": "(ms)",
             "whenChanged": "When changed, send:",
             "payload": "Payload",
             "currentValue": "Current value",

nodes/widgets/ui_number_input.html

@@ -36,7 +36,14 @@
                     }
                 },
                 tooltip: { value: '' },
+                delay: {
+                    value: 300,
+                    validate: function (v) {
+                        return $('#node-input-sendOnDelay').is(':checked') ? (RED.validators.number()(v) && v >= 0) : true
+                    }
+                },
                 passthru: { value: true },
+                sendOnDelay: { value: false },
                 sendOnBlur: { value: true },
                 sendOnEnter: { value: true },
                 className: { value: '' },
@@ -102,6 +109,13 @@
                     $('#node-input-sendOnClear').prop('checked', false)
                 }
 
+                // Handle in-place upgrade: existing nodes should maintain current behavior
+                if (this.delay === undefined) {
+                    // Set delay to 0 and enable sendOnDelay for upgraded nodes
+                    $('#node-input-delay').val('0')
+                    $('#node-input-sendOnDelay').prop('checked', true)
+                }
+
                 if (!this.iconPosition) {
                     $('#node-input-iconPosition').val('left')
                 }
@@ -217,9 +231,17 @@
     <div class="form-row">
         <label style="width:auto" for="node-input-payload"><i class="fa fa-clock-o"></i> <span data-i18n="ui-number-input.label.sendMessageOn"></span></label>
     </div>
+    <div class="form-row form-row-flex" style="padding-left: 25px; align-items: center;">
+        <input type="checkbox" checked id="node-input-sendOnDelay" style="display:inline-block; width:auto; vertical-align:top;">
+        <label style="width:auto" for="node-input-sendOnDelay"> <span data-i18n="ui-number-input.label.delay"></span></label>
+        <div id="node-input-delay-box">
+            <input type="text" style="width:58px" id="node-input-delay">
+            <label for="node-input-delay"><span data-i18n="ui-number-input.label.delayUnit"></span></label>
+        </div>
+    </div>
     <div class="form-row" style="padding-left: 25px;">
         <input type="checkbox" checked id="node-input-sendOnBlur" style="display:inline-block; width:auto; vertical-align:top;">
-        <label style="width:auto" for="node-input-sendOnBlur" data-i18n="ui-number-input.label.focusLeave"></label>
+        <label style="width:auto" for="node-input-sendOnBlur"> <span data-i18n="ui-number-input.label.focusLeave"></span></label>
     </div>
     <div id="node-input-container-sendOnEnter" class="form-row" style="padding-left: 25px;">
         <input type="checkbox" checked id="node-input-sendOnEnter" style="display:inline-block; width:auto; vertical-align:top;">

nodes/widgets/ui_number_input.js

@@ -6,6 +6,15 @@ module.exports = function (RED) {
     function NumberInputNode (config) {
         const node = this
 
+        // Handle in-place upgrade: set defaults for existing nodes
+        if (config.delay === undefined) {
+            config.delay = 0
+            config.sendOnDelay = true
+        }
+
+        // Ensure delay is a valid number >= 0
+        config.delay = Math.max(0, parseInt(config.delay, 10) || 0)
+
         // create node in Node-RED
         RED.nodes.createNode(this, config)
 

ui/src/widgets/ui-number-input/UINumberInput.vue

@@ -179,7 +179,14 @@ export default {
             this.$socket.emit('widget-change', this.id, this.value)
         },
         onChange () {
-            this.send()
+            if (this.props.sendOnDelay) {
+                // is send on delay enabled, if so, set a timeout to send the message
+                if (this.delayTimer) {
+                    // reset the timer to count from the latest change
+                    clearTimeout(this.delayTimer)
+                }
+                this.delayTimer = setTimeout(this.send, this.props.delay)
+            }
         },
         onBlur: function () {
             if (this.props.sendOnBlur) {