[SelectPanel] Fix issue causing no error banner to appear when there …

…are no matches (#3168)
primer · Oct 28, 2024 · 82c2b0a · 82c2b0a
1 parent 400943b
commit 82c2b0a
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/.changeset/quiet-fans-repeat.md b/.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
diff --git a/app/components/primer/alpha/select_panel_element.ts b/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

diff --git a/previews/primer/alpha/select_panel_preview.rb b/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

diff --git a/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb b/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

diff --git a/test/system/alpha/select_panel_test.rb b/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)