fix: stale closures in setOpen

Author: segunadebayo

.changeset/five-oranges-rhyme.md

@@ -0,0 +1,16 @@
+---
+"@zag-js/floating-panel": patch
+"@zag-js/color-picker": patch
+"@zag-js/collapsible": patch
+"@zag-js/date-picker": patch
+"@zag-js/time-picker": patch
+"@zag-js/hover-card": patch
+"@zag-js/combobox": patch
+"@zag-js/popover": patch
+"@zag-js/tooltip": patch
+"@zag-js/dialog": patch
+"@zag-js/select": patch
+"@zag-js/menu": patch
+---
+
+Prevent stale closure in `api.setOpen(...)` methods

packages/machines/collapsible/src/collapsible.connect.ts

@@ -27,8 +27,9 @@ export function connect<T extends PropTypes>(
       send({ type: "size.measure" })
     },
     setOpen(nextOpen) {
-      if (nextOpen === open) return
-      send(nextOpen ? { type: "open" } : { type: "close" })
+      const open = state.matches("open")
+      if (open === nextOpen) return
+      send({ type: nextOpen ? "open" : "close" })
     },
 
     getRootProps() {

packages/machines/color-picker/src/color-picker.connect.ts

@@ -66,7 +66,8 @@ export function connect<T extends PropTypes>(
     valueAsString,
     value,
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.hasTag("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     setValue(value) {

packages/machines/combobox/src/combobox.connect.ts

@@ -94,7 +94,8 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       dom.getInputEl(scope)?.focus()
     },
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.hasTag("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
 

packages/machines/date-picker/src/date-picker.connect.ts

@@ -234,7 +234,8 @@ export function connect<T extends PropTypes>(
       send({ type: "FOCUS.SET", value })
     },
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.matches("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     focusMonth,

packages/machines/dialog/src/dialog.connect.ts

@@ -15,7 +15,8 @@ export function connect<T extends PropTypes>(
   return {
     open,
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.matches("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
 

packages/machines/floating-panel/src/floating-panel.connect.ts

@@ -24,7 +24,8 @@ export function connect<T extends PropTypes>(
   return {
     open: open,
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.hasTag("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     dragging: dragging,

packages/machines/hover-card/src/hover-card.connect.ts

@@ -17,7 +17,8 @@ export function connect<T extends PropTypes>(service: HoverCardService, normaliz
   return {
     open: open,
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.hasTag("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     reposition(options = {}) {

packages/machines/menu/src/menu.connect.ts

@@ -112,7 +112,8 @@ export function connect<T extends PropTypes>(service: Service<MenuSchema>, norma
     highlightedValue,
     open,
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.hasTag("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     setHighlightedValue(value) {

packages/machines/popover/src/popover.connect.ts

@@ -22,7 +22,8 @@ export function connect<T extends PropTypes>(service: PopoverService, normalize:
     portalled,
     open: open,
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.matches("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     reposition(options = {}) {

packages/machines/select/src/select.connect.ts

@@ -79,7 +79,8 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
       dom.getTriggerEl(scope)?.focus({ preventScroll: true })
     },
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.hasTag("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     selectValue(value) {

packages/machines/time-picker/src/time-picker.connect.ts

@@ -52,7 +52,8 @@ export function connect<T extends PropTypes>(
       send({ type: "POSITIONING.SET", options })
     },
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.hasTag("open")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "OPEN" : "CLOSE" })
     },
     setUnitValue(unit, value) {

packages/machines/tooltip/src/tooltip.connect.ts

@@ -31,7 +31,8 @@ export function connect<P extends PropTypes>(
   return {
     open: open,
     setOpen(nextOpen) {
-      if (nextOpen === open) return
+      const open = state.matches("open", "closing")
+      if (open === nextOpen) return
       send({ type: nextOpen ? "open" : "close" })
     },
     reposition(options = {}) {

website/lib/use-search.ts

@@ -2,6 +2,7 @@ import * as combobox from "@zag-js/combobox"
 import * as dialog from "@zag-js/dialog"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { matchSorter } from "match-sorter"
+import { useRouter } from "next/router"
 import { useEffect, useId, useMemo, useState } from "react"
 import {
   searchData,
@@ -39,6 +40,8 @@ export function useSearch(): UseSearchReturn {
     [results],
   )
 
+  const router = useRouter()
+
   const combobox_service = useMachine(combobox.machine, {
     id: useId(),
     placeholder: "Search the docs",
@@ -48,6 +51,9 @@ export function useSearch(): UseSearchReturn {
     openOnChange({ inputValue }) {
       return inputValue.length > 2
     },
+    navigate({ value }) {
+      if (value) router.push(value)
+    },
     onValueChange() {
       dialog_api.setOpen(false)
     },