Fix option ingredients being overwriten (#2341)

src/web/HTMLIngredient.mjs

@@ -166,6 +166,7 @@ class HTMLIngredient {
                         id="${this.id}"
                         tabindex="${this.tabIndex}"
                         arg-name="${this.name}"
+                        data-target="${this.target}"
                         ${this.disabled ? "disabled" : ""}>`;
                 for (i = 0; i < this.value.length; i++) {
                     if ((m = this.value[i].name.match(/\[([a-z0-9 -()^]+)\]/i))) {

src/web/waiters/RecipeWaiter.mjs

@@ -487,11 +487,19 @@ class RecipeWaiter {
      * @param {HTMLElement} op
      */
     triggerArgEvents(op) {
-        // Trigger populateOption and argSelector events
+        // Trigger argSelector events and populateOption events only where the target is empty.
+        // When loading a saved recipe, arguments are populated before this method is called, so
+        // re-triggering populateOption events would overwrite saved custom values with defaults.
+        const args = op.querySelectorAll(".arg");
         const triggerableOptions = op.querySelectorAll(".populate-option, .arg-selector");
         const evt = new Event("change", {bubbles: true});
+
         if (triggerableOptions.length) {
             for (const el of triggerableOptions) {
+                if (el.classList.contains("populate-option")) {
+                    const target = args[el.getAttribute("data-target")];
+                    if (target && target.value !== "") continue;
+                }
                 el.dispatchEvent(evt);
             }
         }