From fb9684802af4d05653d6aead380f92efbb4698dd Mon Sep 17 00:00:00 2001
From: Amr-Shams <amr.shams2015.as@gmail.com>
Date: Wed, 16 Jul 2025 19:01:27 +0300
Subject: [PATCH] feat(examples): sync dropdown with current example on refresh

The dropdown now correctly reflects the current example after a page refresh. This is achieved by parsing the example name from the URL and setting the dropdown's initial state accordingly. Also, an  has been added to the dropdown for improved accessibility.
---
 examples/react/src/App/header.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/examples/react/src/App/header.tsx b/examples/react/src/App/header.tsx
index 37e57910..225a7e1c 100644
--- a/examples/react/src/App/header.tsx
+++ b/examples/react/src/App/header.tsx
@@ -6,13 +6,17 @@ import routes from './routes';
 export default function Header() {
   const location = useLocation();
   const navigate = useNavigate();
-  const [currentPath, setCurrentPath] = useState(location.pathname);
+
+  const pathParts = location.pathname.split('/').filter(Boolean);
+  const initialExample = pathParts.length > 1 ? pathParts[1] : 'basic';
+
+  const [currentPath, setCurrentPath] = useState(initialExample);
 
   useEffect(() => {
     const name = routes.find((route) => route.path === currentPath)?.name;
     document.title = `React Flow Examples${name ? ' - ' + name : ''}`;
     navigate(currentPath);
-  }, [currentPath]);
+  }, [currentPath, navigate]);
 
   return (
     <>
@@ -20,7 +24,11 @@ export default function Header() {
         <a className="logo" href="https://github.com/xyflow/xyflow">
           React Flow Dev
         </a>
-        <select value={currentPath} onChange={(event) => setCurrentPath(event.target.value)}>
+        <select
+          value={currentPath}
+          onChange={(event) => setCurrentPath(event.target.value)}
+          aria-label="select an example"
+        >
           {routes.map((route) => (
             <option value={route.path} key={route.path}>
               {route.name}