fix: make the HTML ids in the roll options dialog unique

src/rolls/check-factory.ts

@@ -126,6 +126,7 @@ async function askForInteractiveRollData(
 ): Promise<Partial<IntermediateInteractiveRollData>> {
     const usedTemplate = template ?? "systems/ds4/templates/dialogs/roll-options.hbs";
     const usedTitle = title ?? getGame().i18n.localize("DS4.DialogRollOptionsDefaultTitle");
+    const id = foundry.utils.randomID();
     const templateData = {
         title: usedTitle,
         checkTargetNumber: checkTargetNumber,
@@ -141,6 +142,7 @@ async function askForInteractiveRollData(
             }
             return { value: key, label: translation };
         }),
+        id,
     };
     const renderedHtml = await renderTemplate(usedTemplate, templateData);
 
@@ -183,8 +185,10 @@ async function askForInteractiveRollData(
             },
             {
                 activateAdditionalListeners: (html, app) => {
-                    const checkModifierCustomFormGroup = html.find("#check-modifier-custom").parent(".form-group");
+                    const checkModifierCustomFormGroup = html
-                    html.find("#check-modifier").on("change", (event) => {
+                        .find(`#check-modifier-custom-${id}`)
+                        .parent(".form-group");
+                    html.find(`#check-modifier-${id}`).on("change", (event) => {
                         if (
                             (event.currentTarget as HTMLSelectElement).value === "custom" &&
                             checkModifierCustomFormGroup.hasClass("ds4-hidden")
@@ -197,6 +201,7 @@ async function askForInteractiveRollData(
                         }
                     });
                 },
+                id,
             },
         ).render(true);
     });

templates/dialogs/roll-options.hbs

@@ -13,18 +13,18 @@ SPDX-License-Identifier: MIT
 !-- @param rollMode: The preselected roll mode (= chat roll-mode).
 !-- @param rollModes: A map of all roll modes and their i18n keys.
 !-- @param checkModifiers: A map of all check difficulty modifiers and their translations.
+!-- @param id: A unique id, used to provided uniqe ids for input elements.
 --}}
 <form class="ds4-roll-options">
     <div class="form-group">
-        <label for="check-target-number">{{localize "DS4.DialogRollOptionsCheckTargetNumberLabel"}}</label>
+        <label for="check-target-number-{{id}}">{{localize "DS4.DialogRollOptionsCheckTargetNumberLabel"}}</label>
-        <input id="check-target-number" data-dtype="Number" type="number" name="check-target-number"
+        <input id="check-target-number-{{id}}" data-dtype="Number" type="number" name="check-target-number"
             value="{{checkTargetNumber}}" />
     </div>
     <div class="form-group">
-        <label for="check-modifier">{{localize "DS4.DialogRollOptionsCheckModifierLabel"}}</label>
+        <label for="check-modifier-{{id}}">{{localize "DS4.DialogRollOptionsCheckModifierLabel"}}</label>
         <div class="form-fields">
-            {{log checkModifiers}}
+            <select id="check-modifier-{{id}}" name="check-modifier" data-dtype="String">
-            <select id="check-modifier" name="check-modifier" data-dtype="String">
                 {{#select "0"}}
                 {{#each checkModifiers as |checkModifier|}}
                 <option value="{{checkModifier.value}}">{{checkModifier.label}}</option>
@@ -34,24 +34,24 @@ SPDX-License-Identifier: MIT
         </div>
     </div>
     <div class="form-group ds4-hidden">
-        <label for="check-modifier-custom">{{localize "DS4.DialogRollOptionsCheckModifierCustomLabel"}}</label>
+        <label for="check-modifier-custom-{{id}}">{{localize "DS4.DialogRollOptionsCheckModifierCustomLabel"}}</label>
-        <input id="check-modifier-custom" data-dtype="Number" type="number" name="check-modifier-custom"
+        <input id="check-modifier-custom-{{id}}" data-dtype="Number" type="number" name="check-modifier-custom"
             value="0" />
     </div>
     <div class="form-group">
-        <label for="maximum-coup-result">{{localize "DS4.DialogRollOptionsMaximumCoupResultLabel"}}</label>
+        <label for="maximum-coup-result-{{id}}">{{localize "DS4.DialogRollOptionsMaximumCoupResultLabel"}}</label>
-        <input id="maximum-coup-result" data-dtype="Number" type="number" name="maximum-coup-result"
+        <input id="maximum-coup-result-{{id}}" data-dtype="Number" type="number" name="maximum-coup-result"
             value="{{maximumCoupResult}}" />
     </div>
     <div class="form-group">
-        <label for="minimum-fumble-result">{{localize "DS4.DialogRollOptionsMinimumFumbleResultLabel"}}</label>
+        <label for="minimum-fumble-result-{{id}}">{{localize "DS4.DialogRollOptionsMinimumFumbleResultLabel"}}</label>
-        <input id="minimum-fumble-result" data-dtype="Number" type="number" name="minimum-fumble-result"
+        <input id="minimum-fumble-result-{{id}}" data-dtype="Number" type="number" name="minimum-fumble-result"
             value="{{minimumFumbleResult}}" />
     </div>
     <div class="form-group">
-        <label for="roll-mode">{{localize "DS4.DialogRollOptionsRollModeLabel"}}</label>
+        <label for="roll-mode-{{id}}">{{localize "DS4.DialogRollOptionsRollModeLabel"}}</label>
         <div class="form-fields">
-            <select id="roll-mode" name="roll-mode" data-dtype="String">
+            <select id="roll-mode-{{id}}" name="roll-mode" data-dtype="String">
                 {{#select rollMode}}
                 {{#each rollModes as |rollModeValue rollModeKey|}}
                 <option value="{{rollModeKey}}">{{localize rollModeValue}}</option>