Clear input when SelectPanel closed (#3095)

.changeset/sweet-donkeys-allow.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Clear input on SelectPanel when dialog closed

app/components/primer/alpha/select_panel_element.ts

@@ -165,7 +165,7 @@ export class SelectPanelElement extends HTMLElement {
   updateAnchorPosition() {
     // If the selectPanel is removed from the screen on resize close the dialog
     if (this && this.offsetParent === null) {
-      this.dialog.close()
+      this.hide()
     }
 
     if (this.invokerElement) {
@@ -464,6 +464,12 @@ export class SelectPanelElement extends HTMLElement {
       // Remove data-ready so it can be set the next time the panel is opened
       this.dialog.removeAttribute('data-ready')
       this.invokerElement?.setAttribute('aria-expanded', 'false')
+      // When we close the dialog, clear the filter input
+      const fireSearchEvent = this.filterInputTextField.value.length > 0
+      this.filterInputTextField.value = ''
+      if (fireSearchEvent) {
+        this.filterInputTextField.dispatchEvent(new Event('input'))
+      }
 
       this.dispatchEvent(
         new CustomEvent('panelClosed', {

test/system/alpha/select_panel_test.rb

@@ -435,6 +435,58 @@ def test_single_selected_item_cannot_be_unchecked
       refute_selector "[aria-checked]", visible: :hidden
     end
 
+    def test_single_select_clears_input_on_selection
+      visit_preview(:single_select)
+
+      click_on_invoker_button
+
+      filter_results(query: "it")
+
+      # keyboard.type(:enter)
+      click_on "Item 1"
+
+      assert_selector "[aria-selected=true]", text: "Item 1", visible: :hidden
+
+      click_on_invoker_button
+
+      # Check that the input value is empty
+      assert_selector "select-panel input", text: ""
+    end
+
+    def test_single_select_clears_input_on_enter
+      visit_preview(:single_select)
+
+      click_on_invoker_button
+
+      filter_results(query: "it")
+
+      keyboard.type(:enter)
+
+      assert_selector "[aria-selected=true]", text: "Item 1", visible: :hidden
+
+      click_on_invoker_button
+
+      # Check that the input value is empty
+      assert_selector "select-panel input", text: ""
+    end
+
+    def test_single_select_clears_input_on_close
+      visit_preview(:single_select)
+
+      click_on_invoker_button
+
+      filter_results(query: "it")
+
+      click_on_x_button
+
+      assert_no_selector "[aria-selected=true]", text: "Item 1", visible: :hidden
+
+      click_on_invoker_button
+
+      # Check that the input value is empty
+      assert_selector "select-panel input", text: ""
+    end
+
     def test_single_select_disabled_item_cannot_be_checked
       visit_preview(:single_select)
 
@@ -994,6 +1046,37 @@ def test_remote_filter_failure
       refute_selector "[data-target='select-panel.fragmentErrorElement']"
     end
 
+    def test_remote_fetch_clears_input_on_close
+      visit_preview(:remote_fetch)
+
+      wait_for_items_to_load do
+        click_on_invoker_button
+      end
+
+      wait_for_items_to_load do
+        filter_results(query: "ph")
+      end
+
+      assert_selector "[role=option]", text: "Photon torpedo"
+      assert_selector "[role=option]", text: "Phaser"
+      assert_no_selector "[role=option]", text: "Bat'leth"
+      assert_no_selector "[role=option]", text: "Lightsaber"
+      assert_selector "[role=option]", count: 2
+
+      wait_for_items_to_load do
+        click_on_x_button
+      end
+
+      # Check that the input value is empty
+      assert_selector "select-panel input", text: "", visible: :hidden
+      # Check that the items are reset
+      assert_selector "[role=option]", text: "Photon torpedo", visible: :hidden
+      assert_selector "[role=option]", text: "Phaser", visible: :hidden
+      assert_selector "[role=option]", text: "Bat'leth", visible: :hidden
+      assert_selector "[role=option]", text: "Lightsaber", visible: :hidden
+      assert_selector "[role=option]", count: 8, visible: :hidden
+    end
+
     ########## TAB INDEX TESTS ############
 
     def test_tab_indices