Merge pull request #1458 from bartbutenaers/dropdown-emit

Dropdown - emit msg on event

docs/nodes/widgets/ui-dropdown.md

@@ -20,6 +20,8 @@ props:
         dynamic: false
     Allow Search:
         description: Allows user to type a new value, filtering the list of possible values to choose.         
+    Msg trigger:
+        description: Specify when an output message should be send.  On every change or when the dropdown is closed.
 dynamic:
     Label:
         payload: msg.ui_update.label
@@ -33,6 +35,9 @@ dynamic:
     Class:
         payload: msg.ui_update.class
         structure: ["String"]
+    Msg trigger:
+        payload: msg.ui_update.msgTrigger
+        structure: ["String"]
 ---
 
 <script setup>

nodes/widgets/locales/en-US/ui_dropdown.html

@@ -41,5 +41,13 @@ <h3>Dynamic Properties (Inputs)</h3>
         </dd>
         <dt class="optional">class <span class="property-type">string</span></dt>
         <dd>Add a CSS class, or more, to the Button at runtime.</dd>
+        <dt class="optional">msgTrigger <span class="property-type">string</span></dt>
+        <dd>
+            Specify when an output message should be triggered (especially useful for multi-selection dropdowns):
+            <ul>
+                <li><code>onChange</code>: each time the selection is changed (i.e. when options are selected or deselected).</li>
+                <li><code>onClose</code>: only when the dropdown is closed.</li>
+            </ul>
+        </dd>
     </dl>
 </script>

nodes/widgets/ui_dropdown.html

@@ -40,7 +40,8 @@
                 topicType: { value: 'msg' },
                 className: { value: '' },
                 // This field controls if the used component is going to be a `v-combox` or a `v-select`, `v-combox` allows typing and filtering possible values
-                typeIsComboBox: { value: true }
+                typeIsComboBox: { value: true },
+                msgTrigger: { value: 'onChange' }
             },
             inputs: 1,
             outputs: 1,
@@ -61,6 +62,9 @@
                 if (this.typeIsComboBox === undefined) {
                     $('#node-input-typeIsComboBox').prop('checked', true)
                 }
+                if (this.msgTrigger === undefined) {
+                    $('#node-input-msgTrigger').val('onChange')
+                }
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                 // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                 if (RED.nodes.subflow(this.z)) {
@@ -222,6 +226,13 @@
     <div class="form-row">
         <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>option</span></a>
     </div>
+    <div class="form-row">
+        <label for="node-input-msgTrigger"><i class="fa fa-paper-plane"></i> Trigger On</label>
+        <select id="node-input-msgTrigger" style="width: 70%;">
+            <option value="onChange">Selection Changed</option>
+            <option value="onClose">Dropdown Closed</option>
+       </select>
+    </div>
     <div class="form-row">
         <label style="width:auto" for="node-input-multiple"><i class="fa fa-th-list"></i> Allow multiple selections from list: </label>
         <input type="checkbox" checked id="node-input-multiple" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
@@ -248,4 +259,4 @@
         <input type="text" id="node-input-topic" style="width:70%" placeholder="optional msg.topic">
         <input type="hidden" id="node-input-topicType">
     </div>
-</script>
+</script>

nodes/widgets/ui_dropdown.js

@@ -26,6 +26,10 @@ module.exports = function (RED) {
                         // dynamically set "label" property
                         statestore.set(group.getBase(), node, msg, 'multiple', update.multiple)
                     }
+                    if (typeof update.msgTrigger !== 'undefined') {
+                        // dynamically set "msgTrigger" property
+                        statestore.set(group.getBase(), node, msg, 'msgTrigger', update.msgTrigger)
+                    }
                 }
                 if (msg.options) {
                     // backward compatibility support

ui/src/widgets/ui-dropdown/UIDropdown.vue

@@ -4,6 +4,7 @@
         :multiple="multiple" :chips="chips" :clearable="clearable" :items="options" item-title="label"
         item-value="value" variant="outlined" hide-details="auto" auto-select-first
         :error-messages="options?.length ? '' : 'No options available'" @update:model-value="onChange"
+        @blur="onBlur"
     >
         <template #label>
             <!-- eslint-disable-next-line vue/no-v-html -->
@@ -14,7 +15,7 @@
         v-else v-model="value" :disabled="!state.enabled" :class="className" :multiple="multiple"
         :chips="chips" :clearable="clearable" :items="options" item-title="label" item-value="value" variant="outlined"
         hide-details="auto" :error-messages="options?.length ? '' : 'No options available'"
-        @update:model-value="onChange"
+        @update:model-value="onChange" @blur="onBlur"
     >
         <template #label>
             <!-- eslint-disable-next-line vue/no-v-html -->
@@ -131,6 +132,7 @@ export default {
                 this.updateDynamicProperty('multiple', updates.multiple)
                 this.updateDynamicProperty('chips', updates.chips)
                 this.updateDynamicProperty('clearable', updates.clearable)
+                this.updateDynamicProperty('msgTrigger', updates.msgTrigger)
             }
         },
         onChange () {
@@ -159,7 +161,19 @@ export default {
                 widgetId: this.id,
                 msg
             })
-            this.$socket.emit('widget-change', this.id, msg.payload)
+
+            const msgTrigger = this.getProperty('msgTrigger') || 'onChange'
+            if (msgTrigger === 'onChange') {
+                this.$socket.emit('widget-change', this.id, msg.payload)
+            }
+        },
+        onBlur () {
+            // The onBlur event is triggered when an element loses focus (e.g. when being closed),
+            // which can be used as an indicator that the user has finished interacting with the dropdown.
+            if (this.getProperty('msgTrigger') === 'onClose') {
+                const msg = this.messages[this.id] || {}
+                this.$socket.emit('widget-change', this.id, msg.payload)
+            }
         },
         select (value) {
             if (value !== undefined) {