diff --git a/demo/Cargo.toml b/demo/Cargo.toml
index 4158dc7..f9ee643 100644
--- a/demo/Cargo.toml
+++ b/demo/Cargo.toml
@@ -21,6 +21,7 @@ send_wrapper = "0.6"
 console_error_panic_hook = "0.1.7"
 console_log = "1"
 log = "0.4"
+js-sys = "0.3.70"
 
 [features]
 default = ["csr"]
diff --git a/demo/src/app.rs b/demo/src/app.rs
index b763c09..5351827 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -58,60 +58,62 @@ fn TheRouter() -> impl IntoView {
                     <Route path=path!("/development/components") view=DevelopmentComponentsMdPage/>
                 </ParentRoute>
                 <ParentRoute path=path!("/components") view=ComponentsPage>
-                    <Route path=path!("/accordion") view=AccordionMdPage/>
-                    <Route path=path!("/anchor") view=AnchorMdPage/>
-                    <Route path=path!("/auto-complete") view=AutoCompleteMdPage/>
-                    <Route path=path!("/avatar") view=AvatarMdPage/>
-                    <Route path=path!("/back-top") view=BackTopMdPage/>
-                    <Route path=path!("/badge") view=BadgeMdPage/>
-                    <Route path=path!("/breadcrumb") view=BreadcrumbMdPage/>
-                    <Route path=path!("/button") view=ButtonMdPage/>
-                    <Route path=path!("/calendar") view=CalendarMdPage/>
-                    <Route path=path!("/card") view=CardMdPage/>
-                    <Route path=path!("/checkbox") view=CheckboxMdPage/>
-                    <Route path=path!("/color-picker") view=ColorPickerMdPage/>
-                    <Route path=path!("/combobox") view=ComboboxMdPage/>
-                    <Route path=path!("/config-provider") view=ConfigProviderMdPage/>
-                </ParentRoute>
-                <ParentRoute path=path!("/components") view=ComponentsPage>
-                    <Route path=path!("/date-picker") view=DatePickerMdPage/>
-                    <Route path=path!("/dialog") view=DialogMdPage/>
-                    <Route path=path!("/divider") view=DividerMdPage/>
-                    <Route path=path!("/drawer") view=DrawerMdPage/>
-                    <Route path=path!("/field") view=FieldMdPage/>
-                    <Route path=path!("/menu") view=MenuMdPage/>
-                    <Route path=path!("/grid") view=GridMdPage/>
-                    <Route path=path!("/icon") view=IconMdPage/>
-                    <Route path=path!("/image") view=ImageMdPage/>
-                    <Route path=path!("/input") view=InputMdPage/>
-                    <Route path=path!("/layout") view=LayoutMdPage/>
-                    <Route path=path!("/loading-bar") view=LoadingBarMdPage/>
-                    <Route path=path!("/message-bar") view=MessageBarMdPage/>
-                    <Route path=path!("/nav") view=NavMdPage/>
-                    <Route path=path!("/pagination") view=PaginationMdPage/>
-                    <Route path=path!("/popover") view=PopoverMdPage/>
-                </ParentRoute>
-                <ParentRoute path=path!("/components") view=ComponentsPage>
-                    <Route path=path!("/progress-bar") view=ProgressBarMdPage/>
-                    <Route path=path!("/radio") view=RadioMdPage/>
-                    <Route path=path!("/scrollbar") view=ScrollbarMdPage/>
-                    <Route path=path!("/skeleton") view=SkeletonMdPage/>
-                    <Route path=path!("/slider") view=SliderMdPage/>
-                    <Route path=path!("/space") view=SpaceMdPage/>
-                    <Route path=path!("/spin-button") view=SpinButtonMdPage/>
-                    <Route path=path!("/spinner") view=SpinnerMdPage/>
-                    <Route path=path!("/switch") view=SwitchMdPage/>
-                    <Route path=path!("/tab-list") view=TabListMdPage/>
-                    <Route path=path!("/table") view=TableMdPage/>
-                    <Route path=path!("/tag") view=TagMdPage/>
-                    <Route path=path!("/text") view=TextMdPage/>
-                    <Route path=path!("/textarea") view=TextareaMdPage/>
-                    <Route path=path!("/time-picker") view=TimePickerMdPage/>
-                    <Route path=path!("/toast") view=ToastMdPage />
-                </ParentRoute>
-                <ParentRoute path=path!("/components") view=ComponentsPage>
-                    <Route path=path!("/tooltip") view=TooltipMdPage />
-                    <Route path=path!("/upload") view=UploadMdPage/>
+                    {view!{
+                        <Route path=path!("/accordion") view=AccordionMdPage/>
+                        <Route path=path!("/anchor") view=AnchorMdPage/>
+                        <Route path=path!("/auto-complete") view=AutoCompleteMdPage/>
+                        <Route path=path!("/avatar") view=AvatarMdPage/>
+                        <Route path=path!("/back-top") view=BackTopMdPage/>
+                        <Route path=path!("/badge") view=BadgeMdPage/>
+                        <Route path=path!("/breadcrumb") view=BreadcrumbMdPage/>
+                        <Route path=path!("/button") view=ButtonMdPage/>
+                        <Route path=path!("/calendar") view=CalendarMdPage/>
+                        <Route path=path!("/card") view=CardMdPage/>
+                        <Route path=path!("/checkbox") view=CheckboxMdPage/>
+                        <Route path=path!("/color-picker") view=ColorPickerMdPage/>
+                        <Route path=path!("/combobox") view=ComboboxMdPage/>
+                        <Route path=path!("/config-provider") view=ConfigProviderMdPage/>
+                    }.into_inner()}
+                    {view!{
+                        <Route path=path!("/date-picker") view=DatePickerMdPage/>
+                        <Route path=path!("/dialog") view=DialogMdPage/>
+                        <Route path=path!("/divider") view=DividerMdPage/>
+                        <Route path=path!("/drawer") view=DrawerMdPage/>
+                        <Route path=path!("/field") view=FieldMdPage/>
+                        <Route path=path!("/menu") view=MenuMdPage/>
+                        <Route path=path!("/grid") view=GridMdPage/>
+                        <Route path=path!("/icon") view=IconMdPage/>
+                        <Route path=path!("/image") view=ImageMdPage/>
+                        <Route path=path!("/input") view=InputMdPage/>
+                        <Route path=path!("/layout") view=LayoutMdPage/>
+                        <Route path=path!("/loading-bar") view=LoadingBarMdPage/>
+                        <Route path=path!("/message-bar") view=MessageBarMdPage/>
+                        <Route path=path!("/nav") view=NavMdPage/>
+                        <Route path=path!("/pagination") view=PaginationMdPage/>
+                        <Route path=path!("/popover") view=PopoverMdPage/>
+                    }.into_inner()}
+                    {view!{
+                        <Route path=path!("/progress-bar") view=ProgressBarMdPage/>
+                        <Route path=path!("/radio") view=RadioMdPage/>
+                        <Route path=path!("/scrollbar") view=ScrollbarMdPage/>
+                        <Route path=path!("/skeleton") view=SkeletonMdPage/>
+                        <Route path=path!("/slider") view=SliderMdPage/>
+                        <Route path=path!("/space") view=SpaceMdPage/>
+                        <Route path=path!("/spin-button") view=SpinButtonMdPage/>
+                        <Route path=path!("/spinner") view=SpinnerMdPage/>
+                        <Route path=path!("/switch") view=SwitchMdPage/>
+                        <Route path=path!("/tab-list") view=TabListMdPage/>
+                        <Route path=path!("/table") view=TableMdPage/>
+                        <Route path=path!("/tag") view=TagMdPage/>
+                        <Route path=path!("/text") view=TextMdPage/>
+                        <Route path=path!("/textarea") view=TextareaMdPage/>
+                        <Route path=path!("/time-picker") view=TimePickerMdPage/>
+                        <Route path=path!("/toast") view=ToastMdPage />
+                    }.into_inner()}
+                    {view!{
+                        <Route path=path!("/tooltip") view=TooltipMdPage />
+                        <Route path=path!("/upload") view=UploadMdPage/>
+                    }.into_inner()}
                 </ParentRoute>
             </Routes>
         </Router>
diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index 57dcee7..ecdf7b7 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -77,14 +77,17 @@ pub fn SiteHeader() -> impl IntoView {
     #[cfg(any(feature = "csr", feature = "hydrate"))]
     {
         use leptos::ev;
-        let handle = window_event_listener(ev::keydown, move |event| {
-            let key = event.key();
-            if key == *"/" {
-                if let Some(auto_complete_ref) = auto_complete_ref.get_untracked() {
-                    event.prevent_default();
-                    auto_complete_ref.focus();
+        let handle = window_event_listener(ev::keydown, move |e| {
+            if js_sys::Reflect::has(&e, &js_sys::wasm_bindgen::JsValue::from_str("key")).unwrap_or_default() {
+                let key = e.key();
+                if key == *"/" {
+                    if let Some(auto_complete_ref) = auto_complete_ref.get_untracked() {
+                        e.prevent_default();
+                        auto_complete_ref.focus();
+                    }
                 }
             }
+            
         });
         on_cleanup(move || handle.remove());
     }