From 6b4983e1ecc29e7cf80cb68f0d274346882123b7 Mon Sep 17 00:00:00 2001
From: Jamie Shark <5520141+jamieshark@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:14:43 -0500
Subject: [PATCH] [SelectPanel] Add checks for existence of filter input
 (#3038)

---
 .changeset/quiet-phones-scream.md                     |  5 +++++
 app/components/primer/alpha/select_panel_element.ts   | 11 ++++++-----
 previews/primer/alpha/select_panel_preview.rb         |  5 +++--
 .../eventually_local_fetch.html.erb                   |  3 ++-
 test/system/alpha/select_panel_test.rb                | 11 +++++++++++
 5 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/quiet-phones-scream.md

diff --git a/.changeset/quiet-phones-scream.md b/.changeset/quiet-phones-scream.md
new file mode 100644
index 0000000000..75ff821152
--- /dev/null
+++ 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
index 3cb044976a..e74b005563 100644
--- 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
index 1d7933cd6f..786c264079 100644
--- 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
index 605d22aa05..0935268a61 100644
--- 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
index 793639f9fb..9ce82caffc 100644
--- 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