From aef8880b8a1b471dfa2966d5da8b06c1677086d5 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Sun, 28 Jun 2026 19:39:43 +0200
Subject: [PATCH] fix(cascade-select): select highlighted item on Enter in
 non-React frameworks

clearHighlightedValue ran in the open state's exit action, which executes
before transition actions could read the highlighted value. Clear it per
closing transition after selection instead.
---
 ...cade-select-select-highlighted-on-enter.md |  5 +++++
 .../src/cascade-select.machine.ts             | 19 ++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/cascade-select-select-highlighted-on-enter.md

diff --git a/.changeset/cascade-select-select-highlighted-on-enter.md b/.changeset/cascade-select-select-highlighted-on-enter.md
new file mode 100644
index 0000000000..8b7591be0f
--- /dev/null
+++ b/.changeset/cascade-select-select-highlighted-on-enter.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/cascade-select": patch
+---
+
+Fix issue where pressing `Enter` on a highlighted leaf node did not select it in non-React frameworks.
diff --git a/packages/machines/cascade-select/src/cascade-select.machine.ts b/packages/machines/cascade-select/src/cascade-select.machine.ts
index 2f6bb264d6..639cf14e25 100644
--- a/packages/machines/cascade-select/src/cascade-select.machine.ts
+++ b/packages/machines/cascade-select/src/cascade-select.machine.ts
@@ -298,17 +298,18 @@ export const machine = createMachine<CascadeSelectSchema>({
 
     open: {
       tags: ["open"],
-      exit: ["clearHighlightedValue", "scrollContentToTop"],
+      exit: ["scrollContentToTop"],
       effects: ["trackDismissableElement", "trackFocusVisible", "computePlacement", "scrollToHighlightedItems"],
       on: {
         "CONTROLLED.CLOSE": [
           {
             guard: "restoreFocus",
             target: "focused",
-            actions: ["focusTriggerEl"],
+            actions: ["focusTriggerEl", "clearHighlightedValue"],
           },
           {
             target: "idle",
+            actions: ["clearHighlightedValue"],
           },
         ],
         CLOSE: [
@@ -319,11 +320,11 @@ export const machine = createMachine<CascadeSelectSchema>({
           {
             guard: "restoreFocus",
             target: "focused",
-            actions: ["invokeOnClose", "focusTriggerEl"],
+            actions: ["invokeOnClose", "focusTriggerEl", "clearHighlightedValue"],
           },
           {
             target: "idle",
-            actions: ["invokeOnClose"],
+            actions: ["invokeOnClose", "clearHighlightedValue"],
           },
         ],
         "TRIGGER.CLICK": [
@@ -333,7 +334,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           },
           {
             target: "focused",
-            actions: ["invokeOnClose", "focusTriggerEl"],
+            actions: ["invokeOnClose", "focusTriggerEl", "clearHighlightedValue"],
           },
         ],
         "ITEM.CLICK": [
@@ -344,7 +345,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           {
             guard: and("canSelectItem", and("shouldCloseOnSelect", not("multiple"))),
             target: "focused",
-            actions: ["selectItem", "invokeOnClose", "focusTriggerEl"],
+            actions: ["selectItem", "invokeOnClose", "focusTriggerEl", "clearHighlightedValue"],
           },
           {
             guard: "canSelectItem",
@@ -423,12 +424,12 @@ export const machine = createMachine<CascadeSelectSchema>({
           {
             guard: and("isAtRootLevel", "restoreFocus"),
             target: "focused",
-            actions: ["invokeOnClose", "focusTriggerEl"],
+            actions: ["invokeOnClose", "focusTriggerEl", "clearHighlightedValue"],
           },
           {
             guard: "isAtRootLevel",
             target: "idle",
-            actions: ["invokeOnClose"],
+            actions: ["invokeOnClose", "clearHighlightedValue"],
           },
           {
             guard: "canNavigateToParent",
@@ -447,7 +448,7 @@ export const machine = createMachine<CascadeSelectSchema>({
           {
             guard: and("canSelectHighlightedItem", and("shouldCloseOnSelectHighlighted", not("multiple"))),
             target: "focused",
-            actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl"],
+            actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl", "clearHighlightedValue"],
           },
           {
             guard: "canSelectHighlightedItem",