[SelectPanel] Add checks for existence of filter input (#3038)

primer · Aug 29, 2024 · 6b4983e · 6b4983e
1 parent 3fb46ed
commit 6b4983e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/.changeset/quiet-phones-scream.md b/.changeset/quiet-phones-scream.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+SelectPanel: check for filter input when loading remote items.
diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts
@@ -411,6 +411,7 @@ export class SelectPanelElement extends HTMLElement {
   }
 
   #setTextFieldLoadingSpinnerTimer() {
+    if (!this.#filterInputTextFieldElement) return
     if (this.#loadingDelayTimeoutId) clearTimeout(this.#loadingDelayTimeoutId)
     if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId)
 
@@ -419,7 +420,7 @@ export class SelectPanelElement extends HTMLElement {
     }, 2000) as unknown as number
 
     this.#loadingDelayTimeoutId = setTimeout(() => {
-      this.#filterInputTextFieldElement.showLeadingSpinner()
+      this.#filterInputTextFieldElement?.showLeadingSpinner()
     }, 1000) as unknown as number
   }
 
@@ -547,7 +548,7 @@ export class SelectPanelElement extends HTMLElement {
       }
 
       case 'loadend': {
-        this.#filterInputTextFieldElement.hideLeadingSpinner()
+        this.#filterInputTextFieldElement?.hideLeadingSpinner()
         this.dispatchEvent(new CustomEvent('loadend'))
         break
       }
@@ -610,7 +611,7 @@ export class SelectPanelElement extends HTMLElement {
       }
 
       case 'loadend': {
-        this.#filterInputTextFieldElement.hideLeadingSpinner()
+        this.#filterInputTextFieldElement?.hideLeadingSpinner()
         if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId)
         if (this.#loadingDelayTimeoutId) clearTimeout(this.#loadingDelayTimeoutId)
         this.dispatchEvent(new CustomEvent('loadend'))
@@ -799,8 +800,8 @@ export class SelectPanelElement extends HTMLElement {
     }
   }
 
-  get #filterInputTextFieldElement(): PrimerTextFieldElement {
-    return this.filterInputTextField.closest('primer-text-field') as PrimerTextFieldElement
+  get #filterInputTextFieldElement(): PrimerTextFieldElement | null {
+    return this.filterInputTextField?.closest('primer-text-field') as PrimerTextFieldElement | null
   }
 
   #performFilteringLocally(): boolean {

diff --git a/previews/primer/alpha/select_panel_preview.rb b/previews/primer/alpha/select_panel_preview.rb
@@ -77,8 +77,9 @@ def local_fetch(open_on_load: false)
       #
       # @snapshot interactive
       # @param open_on_load toggle
-      def eventually_local_fetch(open_on_load: false)
-        render_with_template(locals: { open_on_load: open_on_load })
+      # @param show_filter toggle
+      def eventually_local_fetch(open_on_load: false, show_filter: true)
+        render_with_template(locals: { open_on_load: open_on_load, show_filter: show_filter })
       end
 
       # @label Remote fetch

diff --git a/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb b/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb
@@ -5,7 +5,8 @@
   src: select_panel_items_path,
   select_variant: :multiple,
   fetch_strategy: :eventually_local,
-  open_on_load: open_on_load
+  open_on_load: open_on_load,
+  show_filter: show_filter,
 )) do |panel| %>
   <% panel.with_show_button { "Sci-fi equipment" } %>
   <% panel.with_footer(show_divider: true) do %>

diff --git a/test/system/alpha/select_panel_test.rb b/test/system/alpha/select_panel_test.rb
@@ -877,6 +877,17 @@ def test_ev_loc_initial_failure
       refute_selector "[data-target='select-panel.bannerErrorElement']"
     end
 
+    def test_ev_loc_items_load_without_filter
+      visit_preview(:eventually_local_fetch, show_filter: false)
+
+      wait_for_items_to_load do
+        click_on_invoker_button
+      end
+
+      # items should render without error
+      assert_selector "select-panel ul li"
+    end
+
     ########## REMOTE TESTS ############
 
     def test_remote_items_load