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({ 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({ { 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({ }, { target: "focused", - actions: ["invokeOnClose", "focusTriggerEl"], + actions: ["invokeOnClose", "focusTriggerEl", "clearHighlightedValue"], }, ], "ITEM.CLICK": [ @@ -344,7 +345,7 @@ export const machine = createMachine({ { 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({ { 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({ { guard: and("canSelectHighlightedItem", and("shouldCloseOnSelectHighlighted", not("multiple"))), target: "focused", - actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl"], + actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl", "clearHighlightedValue"], }, { guard: "canSelectHighlightedItem",