Move out the querySelector from the connectedCallback

opf · Sep 5, 2024 · 16787e9 · 16787e9
1 parent 1f26a21
commit 16787e9
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/app/components/primer/open_project/sub_header_element.ts b/app/components/primer/open_project/sub_header_element.ts
@@ -10,17 +10,7 @@ class SubHeaderElement extends HTMLElement {
   clearButtonWrapper: HTMLElement | null
 
   connectedCallback() {
-    this.#waitForCondition(
-      () => Boolean(this.filterInput),
-      () => {
-        this.clearFilterButton = this.querySelector('button.FormControl-input-trailingAction') as HTMLButtonElement
-        this.clearButtonWrapper = this.clearFilterButton.closest('.FormControl-input-wrap') as HTMLElement
-
-        if (this.clearFilterButton) {
-          this.toggleFilterInputClearButton()
-        }
-      }
-    )
+    this.#setupFilterInputClearButton();
   }
 
   toggleFilterInputClearButton() {
@@ -64,6 +54,20 @@ class SubHeaderElement extends HTMLElement {
     this.classList.remove('SubHeader--expandedSearch')
   }
 
+  #setupFilterInputClearButton(){
+    this.#waitForCondition(
+      () => Boolean(this.filterInput),
+      () => {
+        this.clearFilterButton = this.querySelector('button.FormControl-input-trailingAction') as HTMLButtonElement
+        this.clearButtonWrapper = this.clearFilterButton.closest('.FormControl-input-wrap') as HTMLElement
+
+        if (this.clearFilterButton) {
+          this.toggleFilterInputClearButton()
+        }
+      }
+    )
+  }
+
   // Waits for condition to return true. If it returns false initially, this function creates a
   // MutationObserver that calls body() whenever the contents of the component change.
   #waitForCondition(condition: () => boolean, body: () => void) {