[SelectPanel] Fix issue causing no error banner to appear when there are no matches (#3168)

Author: camertron

.changeset/quiet-fans-repeat.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+[SelectPanel] Fix issue causing no error banner to appear when there are no matches

app/components/primer/alpha/select_panel_element.ts

@@ -752,8 +752,8 @@ export class SelectPanelElement extends HTMLElement {
   #setErrorState(type: ErrorStateType) {
     let errorElement = this.fragmentErrorElement
 
-    if (type === ErrorStateType.BODY) {
-      this.fragmentErrorElement?.removeAttribute('hidden')
+    if (type === ErrorStateType.BODY && this.fragmentErrorElement) {
+      this.fragmentErrorElement.removeAttribute('hidden')
       this.bannerErrorElement.setAttribute('hidden', '')
     } else {
       errorElement = this.bannerErrorElement

previews/primer/alpha/select_panel_preview.rb

@@ -227,12 +227,15 @@ def remote_fetch_initial_failure(open_on_load: false)
       # @snapshot interactive
       # @param open_on_load toggle
       # @param banner_scheme [Symbol] select [danger, warning]
+      # @param show_results toggle
       def remote_fetch_filter_failure(
         open_on_load: false,
-        banner_scheme: :danger
+        banner_scheme: :danger,
+        show_results: true
       )
         render_with_template(locals: {
           open_on_load: open_on_load,
+          show_results: show_results,
           system_arguments: {
             # .to_sym workaround for https://github.com/lookbook-hq/lookbook/issues/640
             banner_scheme: banner_scheme.to_sym

previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb

@@ -3,7 +3,8 @@
 <%= render(Primer::Alpha::SelectPanel.new(
   data: { interaction_subject: subject_id },
   # passing a uuid here causes the request to succeed the first time and fail all subsequent times
-  src: select_panel_items_path(fail: "true", uuid: SecureRandom.uuid),
+  # set show_results to false to simulate an initial load with no items
+  src: select_panel_items_path(show_results: show_results.to_s, fail: "true", uuid: SecureRandom.uuid),
   fetch_strategy: :remote,
   open_on_load: open_on_load,
   **system_arguments

test/system/alpha/select_panel_test.rb

@@ -1046,6 +1046,25 @@ def test_remote_filter_failure
       refute_selector "[data-target='select-panel.fragmentErrorElement']"
     end
 
+    def test_no_results_filter_failure
+      visit_preview(:remote_fetch_filter_failure, show_results: false)
+
+      wait_for_items_to_load do
+        click_on_invoker_button
+      end
+
+      # no items on initial load
+      assert_selector "select-panel", text: "No results found"
+
+      wait_for_items_to_load do
+        filter_results(query: "foobar")
+      end
+
+      # only the banner-based error message should appear
+      assert_selector "[data-target='select-panel.bannerErrorElement']", text: "Sorry, something went wrong"
+      refute_selector "[data-target='select-panel.fragmentErrorElement']"
+    end
+
     def test_remote_fetch_clears_input_on_close
       visit_preview(:remote_fetch)