fix: dont use this

adobe · Sep 18, 2024 · 21b2b7b · 21b2b7b
1 parent fc9c172
commit 21b2b7b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/tools/oversight/elements/url-selector.js b/tools/oversight/elements/url-selector.js
@@ -35,6 +35,7 @@ export default class URLSelector extends HTMLElement {
 
   async connectedCallback() {
     this.innerHTML = this.template;
+    const datalist = this.querySelector('datalist');
     const input = this.querySelector('input');
     input.value = new URL(window.location.href).searchParams.get('domain');
     const img = this.querySelector('img');
@@ -43,7 +44,7 @@ export default class URLSelector extends HTMLElement {
     const token = getPersistentToken();
     if (!token) {
       input.disabled = true;
-      this.datalist.remove();
+      datalist.remove();
 
       // detect a click with shift key pressed
       img.addEventListener('click', (event) => {
@@ -62,13 +63,13 @@ export default class URLSelector extends HTMLElement {
         },
       });
       if (!resp.ok) {
-        this.datalist.remove();
+        datalist.remove();
       } else {
         const { domains } = await resp.json();
         domains.forEach((domain) => {
           const option = document.createElement('option');
           option.value = domain;
-          this.datalist.appendChild(option);
+          datalist.appendChild(option);
         });
       }
     }

diff --git a/tools/rum/elements/url-selector.js b/tools/rum/elements/url-selector.js
@@ -3,9 +3,6 @@ function getPersistentToken() {
 }
 
 export default class URLSelector extends HTMLElement {
-  /** @type {HTMLDataListElement} */
-  datalist = null;
-
   constructor() {
     super();
     this.template = `
@@ -38,7 +35,7 @@ export default class URLSelector extends HTMLElement {
 
   async connectedCallback() {
     this.innerHTML = this.template;
-    this.datalist = this.querySelector('datalist');
+    const datalist = this.querySelector('datalist');
     const input = this.querySelector('input');
     input.value = new URL(window.location.href).searchParams.get('domain');
     const img = this.querySelector('img');
@@ -47,7 +44,7 @@ export default class URLSelector extends HTMLElement {
     const token = getPersistentToken();
     if (!token) {
       input.disabled = true;
-      this.datalist.remove();
+      datalist.remove();
     } else {
       const resp = await fetch('https://rum.fastly-aem.page/domains?suggested=true', {
         headers: {
@@ -56,13 +53,13 @@ export default class URLSelector extends HTMLElement {
         },
       });
       if (!resp.ok) {
-        this.datalist.remove();
+        datalist.remove();
       } else {
         const { domains } = await resp.json();
         domains.forEach((domain) => {
           const option = document.createElement('option');
           option.value = domain;
-          this.datalist.appendChild(option);
+          datalist.appendChild(option);
         });
       }
     }