From 4cd918f3898b39873fa7d1eb1fb1bba44fd133a7 Mon Sep 17 00:00:00 2001
From: Pascal Thomet <pthomet@gmail.com>
Date: Sun, 24 Nov 2024 00:24:01 +0100
Subject: [PATCH] AppWindowParams: add EmscriptenKeyboardElement

---
 src/hello_imgui/app_window_params.h           | 19 +++++++++++++++++++
 .../sdl_window_helper.cpp                     | 15 +++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/hello_imgui/app_window_params.h b/src/hello_imgui/app_window_params.h
index b394029d..f74afdd5 100644
--- a/src/hello_imgui/app_window_params.h
+++ b/src/hello_imgui/app_window_params.h
@@ -34,6 +34,16 @@ enum class WindowPositionMode
 };
 
 
+enum class EmscriptenKeyboardElement
+{
+    Window,
+    Document,
+    Screen,
+    Canvas,
+    Default
+};
+
+
 enum class WindowSizeMeasureMode
 {
     // ScreenCoords: measure window size in screen coords.
@@ -215,6 +225,15 @@ struct AppWindowParams
     // If true, HelloImGui will handle the edgeInsets on iOS.
     bool       handleEdgeInsets = true;
 
+
+    // --------------- Emscripten ------------------
+    // `emscriptenKeyboardElement`: _EmscriptenKeyboardElement, default=Default_. HTML element in which SDL will capture the keyboard events.
+    // (For Emscripten only)
+    // Choose between: Window, Document, Screen, Canvas, Default.
+    // If Default, the default behavior is used (which is to capture the keyboard events for the window).
+    EmscriptenKeyboardElement emscriptenKeyboardElement = EmscriptenKeyboardElement::Default;
+
+
     // ----------------- repaint the window during resize -----------------
     // Very advanced and reserved for advanced C++ users.
     // If you set this to true, the window will be repainted during resize.
diff --git a/src/hello_imgui/internal/backend_impls/backend_window_helper/sdl_window_helper.cpp b/src/hello_imgui/internal/backend_impls/backend_window_helper/sdl_window_helper.cpp
index 14b9f8b0..610f7d4d 100644
--- a/src/hello_imgui/internal/backend_impls/backend_window_helper/sdl_window_helper.cpp
+++ b/src/hello_imgui/internal/backend_impls/backend_window_helper/sdl_window_helper.cpp
@@ -130,6 +130,21 @@ namespace HelloImGui { namespace BackendApi
         SDL_SetHint(SDL_HINT_IME_SHOW_UI, "1");
         #endif
 
+        #ifdef __EMSCRIPTEN__
+        if (appWindowParams.emscriptenKeyboardElement == EmscriptenKeyboardElement::Window)
+            SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#window");
+        else if (appWindowParams.emscriptenKeyboardElement == EmscriptenKeyboardElement::Document)
+            SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#document");
+        else if (appWindowParams.emscriptenKeyboardElement == EmscriptenKeyboardElement::Screen)
+            SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#screen");
+        else if (appWindowParams.emscriptenKeyboardElement == EmscriptenKeyboardElement::Canvas)
+            SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#canvas");
+        else if (appWindowParams.emscriptenKeyboardElement == EmscriptenKeyboardElement::Default)
+            // Do nothing (default behavior, which is to capture the keyboard events for the window,
+            // except if the user has already set the hint manually in the javascript code)
+            {}
+        #endif // __EMSCRIPTEN__
+
         // If the window is created with the SDL_WINDOW_ALLOW_HIGHDPI flag,
         // its size in pixels may differ from its size in screen coordinates on platforms with high-DPI support
         // (e.g. iOS and macOS).