fix(frontend): prevent re-cloning of find button in geo input

getindiekit · Apr 4, 2024 · 7168c47 · 7168c47
1 parent b2cb7f1
commit 7168c47
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/packages/frontend/components/geo-input/index.js b/packages/frontend/components/geo-input/index.js
@@ -5,36 +5,41 @@ export const GeoInputFieldComponent = class extends HTMLElement {
   constructor() {
     super();
 
-    this.$geoInput = this.querySelector("input");
+    this.$geoInput = this.querySelector(".geo-input");
+    this.$geoInputButton = this.querySelector(".geo-input__button");
+    this.$geoInputButtonTemplate = this.querySelector("#geo-input-button");
+    this.$errorMessageTemplate = this.querySelector("#error-message");
 
     this.i18nDenied = this.getAttribute("i18n-denied");
     this.i18nFailed = this.getAttribute("i18n-failed");
-
-    this.$findButtonTemplate = this.querySelector("#find-button");
-    this.$errorMessageTemplate = this.querySelector("#error-message");
   }
 
   connectedCallback() {
     if (!navigator.geolocation) {
       return;
     }
 
-    // Create group to hold input and button
-    const $inputButtonGroup = document.createElement("div");
-    $inputButtonGroup.classList.add("input-button-group");
+    if (!this.$geoInputButton) {
+      // Create group to hold input and button
+      const $inputButtonGroup = document.createElement("div");
+      $inputButtonGroup.classList.add("input-button-group");
 
-    // Create and display find location button
-    let $findButton = this.$findButtonTemplate.content.cloneNode(true);
+      // Create find location button
+      const $geoInputButton =
+        this.$geoInputButtonTemplate.content.cloneNode(true);
 
-    // Wrap input within `input-button-group` container
-    wrapElement(this.$geoInput, $inputButtonGroup);
+      // Wrap input within `input-button-group` container
+      wrapElement(this.$geoInput, $inputButtonGroup);
 
-    // Add button to `input-button-group` container
-    $inputButtonGroup.append($findButton);
+      // Add find location button to `input-button-group` container
+      $inputButtonGroup.append($geoInputButton);
+
+      // Update `this.$geoInputButton`
+      this.$geoInputButton = this.querySelector(".geo-input__button");
+    }
 
     // Add event to cloned button
-    $findButton = this.querySelector("button");
-    $findButton.addEventListener("click", () => this.find());
+    this.$geoInputButton.addEventListener("click", () => this.find());
   }
 
   /**

diff --git a/packages/frontend/components/geo-input/template.njk b/packages/frontend/components/geo-input/template.njk
@@ -10,7 +10,7 @@
       "i18n-failed": __("geoInput.failed")
     }
   },
-  classes: opts.classes,
+  classes: classes("geo-input", opts),
   id: id,
   name: opts.name,
   value: opts.value,
@@ -19,9 +19,9 @@
   optional: opts.optional,
   errorMessage: opts.errorMessage
 }) %}
-  <template id="find-button">
+  <template id="geo-input-button">
     {{ button({
-      classes: "button--secondary",
+      classes: "geo-input__button button--secondary",
       type: "button",
       text: __("geoInput.getCurrentPosition")
     }) | indent(4) }}