From 9214a73e920cafcfba5cea264682c5a67d043611 Mon Sep 17 00:00:00 2001
From: phroggster <phroggster@users.noreply.github.com>
Date: Wed, 19 Feb 2025 23:42:17 -0600
Subject: [PATCH] fix: dropdown-select Data Value Typing

- Loading a dropdown-select element with no values loaded to bind to it
  locked it into string-handling mode.
- This broke the Toggle Event effect on initial creation, which expected
  object-handling mode, but supplied no initial binding values.
- Added an optional one-way "value-mode" attrib to dropdown-select to
  force it to operate in either object or string mode, or default to
  prior behavior when unspecified.
- See #3006
---
 src/backend/effects/builtin/toggle-event.js       | 11 ++++++++---
 src/gui/app/directives/controls/firebot-select.js |  9 +++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/backend/effects/builtin/toggle-event.js b/src/backend/effects/builtin/toggle-event.js
index 6a9cd610b..9ee5605b0 100644
--- a/src/backend/effects/builtin/toggle-event.js
+++ b/src/backend/effects/builtin/toggle-event.js
@@ -23,7 +23,7 @@ const chat = {
         </eos-container>
 
         <eos-container header="Event" pad-top="true" ng-show="effect.selectedGroupName">
-            <dropdown-select options="eventOptions[effect.selectedGroupName]" selected="effect.selectedEventId"></dropdown-select>
+            <dropdown-select options="eventOptions[effect.selectedGroupName]" selected="effect.selectedEventId" value-mode="object"></dropdown-select>
         </eos-container>
 
         <eos-container header="Toggle Action" pad-top="true">
@@ -48,6 +48,11 @@ const chat = {
 
             for (const groupEvent of groups[groupId].events) {
                 $scope.eventOptions[group.name][groupEvent.id] = groupEvent.name;
+
+                // Update the effect should the event set have been renamed
+                if ($scope.effect.selectedEventId === groupEvent.id) {
+                    $scope.effect.selectedGroupName = group.name;
+                }
             }
         }
 
@@ -63,14 +68,14 @@ const chat = {
             $scope.effect.toggleType = "disable";
         }
     },
-    optionsValidator: effect => {
+    optionsValidator: (effect) => {
         const errors = [];
         if (effect.selectedEventId == null) {
             errors.push("Please select an event.");
         }
         return errors;
     },
-    onTriggerEvent: async event => {
+    onTriggerEvent: async (event) => {
         const { effect } = event;
         const selectedEvent = eventAccess.getEvent(effect.selectedEventId);
         const isActive = effect.toggleType === "toggle" ? !selectedEvent.active : effect.toggleType === "enable";
diff --git a/src/gui/app/directives/controls/firebot-select.js b/src/gui/app/directives/controls/firebot-select.js
index 521bfc734..0aa07ac87 100644
--- a/src/gui/app/directives/controls/firebot-select.js
+++ b/src/gui/app/directives/controls/firebot-select.js
@@ -12,7 +12,8 @@
             onUpdate: '&',
             isDisabled: '<',
             rightJustify: "<?",
-            ariaLabel: "@?"
+            ariaLabel: "@?",
+            valueMode: "@?"
         },
         template: `
         <div class="btn-group" uib-dropdown>
@@ -73,8 +74,12 @@
             };
 
             function loadOptions() {
+                if (ctrl.valueMode === "string") {
+                    ctrl.objectMode = false;
+                    return;
+                }
                 const options = ctrl.options;
-                if (!Array.isArray(options) && options instanceof Object) {
+                if (ctrl.valueMode === "object" || !Array.isArray(options) && options instanceof Object) {
                     ctrl.objectMode = true;
                 }
             }