fix: select focus return

chakra-ui · Sep 5, 2024 · 664fd91 · 664fd91
1 parent ed6a8a2
commit 664fd91
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/fuzzy-icons-sparkle.md b/.changeset/fuzzy-icons-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/select": patch
+---
+
+Fix regression where select doesn't restore focus to trigger on keyboard selection
diff --git a/.xstate/select.js b/.xstate/select.js
@@ -215,7 +215,7 @@ const fetchMachine = createMachine({
         }, {
           cond: "closeOnSelect",
           target: "focused",
-          actions: ["selectHighlightedItem", "invokeOnClose", "clearHighlightedItem"]
+          actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl", "clearHighlightedItem"]
         }, {
           actions: ["selectHighlightedItem"]
         }],

diff --git a/e2e/select.e2e.ts b/e2e/select.e2e.ts
@@ -113,6 +113,7 @@ test.describe("keyboard / select", () => {
     await I.pressKey("Enter")
     await I.seeItemIsChecked("Andorra")
     await I.seeTriggerHasText("Andorra")
+    await I.seeTriggerIsFocused()
   })
 
   test("should select on space", async () => {
@@ -121,13 +122,15 @@ test.describe("keyboard / select", () => {
     await I.pressKey(" ")
     await I.seeItemIsChecked("Andorra")
     await I.seeTriggerHasText("Andorra")
+    await I.seeTriggerIsFocused()
   })
 
   test("should close on select", async () => {
     await I.clickTrigger()
     await I.pressKey("ArrowDown")
     await I.pressKey("Enter")
     await I.dontSeeDropdown()
+    await I.seeTriggerIsFocused()
   })
 
   test("should not close on closeOnSelect = false", async () => {

diff --git a/packages/machines/select/src/select.machine.ts b/packages/machines/select/src/select.machine.ts
@@ -273,7 +273,7 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
               {
                 guard: "closeOnSelect",
                 target: "focused",
-                actions: ["selectHighlightedItem", "invokeOnClose", "clearHighlightedItem"],
+                actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl", "clearHighlightedItem"],
               },
               {
                 actions: ["selectHighlightedItem"],