web: only auto-update slug when slug and name are already in sync

web/src/elements/buttons/ModalButton.ts

@@ -64,7 +64,6 @@ export class ModalButton extends LitElement {
         });
         // Make name field update slug field
         this.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => {
-            input.addEventListener("input", () => {
             const form = input.closest("form");
             if (form === null) {
                 return;
@@ -73,6 +72,13 @@ export class ModalButton extends LitElement {
             if (!slugField) {
                 return;
             }
+            // Only attach handler if the slug is already equal to the name
+            // if not, they are probably completely different and shouldn't update
+            // each other
+            if (convertToSlug(input.value) !== slugField.value) {
+                return;
+            }
+            input.addEventListener("input", () => {
                 slugField.value = convertToSlug(input.value);
             });
         });