fix: update open state cannot close or open sidebar

shadcn-ui · Nov 28, 2024 · 2302f47 · 2302f47
1 parent 0302014
commit 2302f47
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/apps/www/registry/default/ui/sidebar.tsx b/apps/www/registry/default/ui/sidebar.tsx
@@ -94,6 +94,17 @@ const SidebarProvider = React.forwardRef<
       [isMobile, setOpenProp]
     )
 
+    // When openProp changes, update both mobile and desktop states
+    React.useEffect(() => {
+      if (openProp !== undefined) {
+        if (isMobile) {
+          _setOpenMobile(openProp)
+        } else {
+          _setOpen(openProp)
+        }
+      }
+    }, [openProp, isMobile])
+
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
         const openState = typeof value === "function" ? value(open) : value
@@ -104,7 +115,8 @@ const SidebarProvider = React.forwardRef<
 
     const setOpenMobile = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(_openMobile) : value
+        const openState =
+          typeof value === "function" ? value(_openMobile) : value
         updateOpenState(openState)
       },
       [_openMobile, updateOpenState]
@@ -147,7 +159,15 @@ const SidebarProvider = React.forwardRef<
         setOpenMobile,
         toggleSidebar,
       }),
-      [state, open, setOpen, isMobile, _openMobile, setOpenMobile, toggleSidebar]
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        _openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      ]
     )
 
     return (

diff --git a/apps/www/registry/new-york/ui/sidebar.tsx b/apps/www/registry/new-york/ui/sidebar.tsx
@@ -94,6 +94,17 @@ const SidebarProvider = React.forwardRef<
       [isMobile, setOpenProp]
     )
 
+    // When openProp changes, update both mobile and desktop states
+    React.useEffect(() => {
+      if (openProp !== undefined) {
+        if (isMobile) {
+          _setOpenMobile(openProp)
+        } else {
+          _setOpen(openProp)
+        }
+      }
+    }, [openProp, isMobile])
+
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
         const openState = typeof value === "function" ? value(open) : value
@@ -104,7 +115,8 @@ const SidebarProvider = React.forwardRef<
 
     const setOpenMobile = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(_openMobile) : value
+        const openState =
+          typeof value === "function" ? value(_openMobile) : value
         updateOpenState(openState)
       },
       [_openMobile, updateOpenState]
@@ -147,7 +159,15 @@ const SidebarProvider = React.forwardRef<
         setOpenMobile,
         toggleSidebar,
       }),
-      [state, open, setOpen, isMobile, _openMobile, setOpenMobile, toggleSidebar]
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        _openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      ]
     )
 
     return (