From 95fdd4249a4bba98cd2135145e8efded2b5b3815 Mon Sep 17 00:00:00 2001
From: Matthew Kim <38759997+friendlymatthew@users.noreply.github.com>
Date: Fri, 16 Aug 2024 21:40:28 -0400
Subject: [PATCH] Handle spacebar renaming edgecase (#129)

---
 examples/demo/src/app.rs      | 16 ++++++++--------
 examples/demo/src/main.rs     |  2 +-
 examples/ssr-demo/src/app.rs  | 16 ++++++++++++----
 leptos_hotkeys/src/context.rs | 10 ++++++++--
 leptos_hotkeys/src/hotkey.rs  |  4 +++-
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/examples/demo/src/app.rs b/examples/demo/src/app.rs
index 7267fbc..51ddcfd 100644
--- a/examples/demo/src/app.rs
+++ b/examples/demo/src/app.rs
@@ -22,14 +22,14 @@ pub fn App() -> impl IntoView {
     provide_hotkeys_context(main_ref, false, scopes!("scope_a"));
 
     view! {
-        <Stylesheet id="leptos" href="/pkg/demo.css"/>
+        <Stylesheet id="leptos" href="/pkg/demo.css" />
         <main _ref=main_ref>
-                <Router>
-                    <Routes>
-                        <Route path="/" view=HomePage/>
-                        <Route path="/:else" view=ErrorPage/>
-                    </Routes>
-                </Router>
+            <Router>
+                <Routes>
+                    <Route path="/" view=HomePage />
+                    <Route path="/:else" view=ErrorPage />
+                </Routes>
+            </Router>
         </main>
     }
 }
@@ -156,7 +156,7 @@ fn HomePage() -> impl IntoView {
                                 <p>scope_b</p>
                                 <div class="space-y-2">
                                     <p>press 'T' to switch themes</p>
-                                    <p>press "Cmd/Super/Win" + 'B'</p>
+                                    <p>press "Cmd/Super/Win"+ 'B'</p>
                                 </div>
 
                             </div>
diff --git a/examples/demo/src/main.rs b/examples/demo/src/main.rs
index c352ae9..f28eb0b 100644
--- a/examples/demo/src/main.rs
+++ b/examples/demo/src/main.rs
@@ -9,6 +9,6 @@ pub fn main() {
     logging::log!("csr mode - mounting to body");
 
     mount_to_body(|| {
-        view! { <App/> }
+        view! { <App /> }
     });
 }
diff --git a/examples/ssr-demo/src/app.rs b/examples/ssr-demo/src/app.rs
index 30a7093..af58d68 100644
--- a/examples/ssr-demo/src/app.rs
+++ b/examples/ssr-demo/src/app.rs
@@ -16,20 +16,20 @@ pub fn App() -> impl IntoView {
     let HotkeysContext { .. } = provide_hotkeys_context(main_ref, false, scopes!());
 
     view! {
-        <Stylesheet id="leptos" href="/pkg/ssr-demo.css"/>
+        <Stylesheet id="leptos" href="/pkg/ssr-demo.css" />
 
         // sets the document title
-        <Title text="Welcome to Leptos"/>
+        <Title text="Welcome to Leptos" />
 
         // content for this welcome page
         <Router fallback=|| {
             let mut outside_errors = Errors::default();
             outside_errors.insert_with_default_key(AppError::NotFound);
-            view! { <ErrorTemplate outside_errors/> }.into_view()
+            view! { <ErrorTemplate outside_errors /> }.into_view()
         }>
             <main _ref=main_ref>
                 <Routes>
-                    <Route path="" view=HomePage/>
+                    <Route path="" view=HomePage />
                 </Routes>
             </main>
         </Router>
@@ -64,11 +64,19 @@ fn HomePage() -> impl IntoView {
         logging::log!("works either using control left or control right!")
     });
 
+    let giraffe_signal = create_rw_signal(false);
+
+    use_hotkeys!(("space + l") => move |_| {
+        giraffe_signal.set(!giraffe_signal.get());
+        logging::log!("i'm a giraffe");
+    });
+
     view! {
         <h1>"Welcome to Leptos!"</h1>
         <div>"Press arrow up and arrow down: " {count}</div>
         <div tabIndex=-1 _ref=div_ref>
             howdy
         </div>
+        <Show when=move || giraffe_signal.get()>"I'm a giraffe!"</Show>
     }
 }
diff --git a/leptos_hotkeys/src/context.rs b/leptos_hotkeys/src/context.rs
index b4f221f..beee3dc 100644
--- a/leptos_hotkeys/src/context.rs
+++ b/leptos_hotkeys/src/context.rs
@@ -97,13 +97,19 @@ where
         let keydown_listener =
             wasm_bindgen::closure::Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
                 pressed_keys.update(|keys| {
-                    keys.insert(event.key().to_lowercase(), event);
+                    match &event.key().eq_ignore_ascii_case(" ") {
+                        true => keys.insert("spacebar".to_string(), event),
+                        false => keys.insert(event.key().to_lowercase(), event),
+                    };
                 });
             }) as Box<dyn Fn(_)>);
         let keyup_listener =
             wasm_bindgen::closure::Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
                 pressed_keys.update(|keys| {
-                    keys.remove(&event.key().to_lowercase());
+                    match &event.key().eq_ignore_ascii_case(" ") {
+                        true => keys.remove(&"spacebar".to_string()),
+                        false => keys.remove(&event.key().to_lowercase()),
+                    };
                 });
             }) as Box<dyn Fn(_)>);
 
diff --git a/leptos_hotkeys/src/hotkey.rs b/leptos_hotkeys/src/hotkey.rs
index 84edb09..4c2664b 100644
--- a/leptos_hotkeys/src/hotkey.rs
+++ b/leptos_hotkeys/src/hotkey.rs
@@ -37,7 +37,7 @@ impl FromStr for Hotkey {
     fn from_str(key_combination: &str) -> Result<Self, Self::Err> {
         let parts = key_combination
             .split('+')
-            .map(|v| if v == " " { v } else { v.trim() })
+            .map(|v| if v == " " { "spacebar" } else { v.trim() })
             .collect::<Vec<&str>>();
 
         let mut modifiers = KeyboardModifiers::default();
@@ -67,6 +67,8 @@ impl FromStr for Hotkey {
                 "shiftright" => modifiers.shift = true,
                 "shift" => modifiers.shift = true,
 
+                "spacebar" | "space" | " " => keys.push("spacebar".to_string()), // spacebar key is " "
+
                 key => keys.push(key.to_lowercase().to_string()),
             }
         }