From 8f8a614a5cca00c16949c7b2ac81ae367e9a29e7 Mon Sep 17 00:00:00 2001
From: Reinis Mazeiks <reinis.mazeiks@gmail.com>
Date: Tue, 28 Jun 2022 23:58:07 +0300
Subject: [PATCH] Add keyboard events to event example

---
 examples/all_events.rs | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/examples/all_events.rs b/examples/all_events.rs
index 5c6d56e37..513a92f68 100644
--- a/examples/all_events.rs
+++ b/examples/all_events.rs
@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use dioxus_core::UiEvent;
-use dioxus_html::on::MouseData;
+use dioxus_html::on::{KeyboardData, MouseData};
 use std::sync::Arc;
 
 fn main() {
@@ -14,6 +14,9 @@ enum Event {
     MouseDoubleClick(Arc<MouseData>),
     MouseDown(Arc<MouseData>),
     MouseUp(Arc<MouseData>),
+    KeyDown(Arc<KeyboardData>),
+    KeyUp(Arc<KeyboardData>),
+    KeyPress(Arc<KeyboardData>),
 }
 
 const MAX_EVENTS: usize = 4;
@@ -47,13 +50,18 @@ fn app(cx: Scope) -> Element {
             style: "{container_style}",
             div {
                 style: "{rect_style}",
+                // focusing is necessary to catch keyboard events
+                tabindex: "0",
+
                 onmousemove: move |event| log_event(Event::MouseMove(event.data)),
                 onclick: move |event| log_event(Event::MouseClick(event.data)),
                 ondblclick: move |event| log_event(Event::MouseDoubleClick(event.data)),
                 onmousedown: move |event| log_event(Event::MouseDown(event.data)),
                 onmouseup: move |event| log_event(Event::MouseUp(event.data)),
-                // prevent selection
-                prevent_default: "mousedown",
+
+                onkeydown: move |event| log_event(Event::KeyDown(event.data)),
+                onkeyup: move |event| log_event(Event::KeyUp(event.data)),
+                onkeypress: move |event| log_event(Event::KeyPress(event.data)),
             }
             div { events_rendered },
         },