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

Author: jamieshark

.changeset/quiet-phones-scream.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+SelectPanel: check for filter input when loading remote items.

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 {

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

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 %>

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