Fix canvas/text input focus on iOS web browsers

Author: BKSalman

crates/eframe/Cargo.toml

@@ -248,6 +248,7 @@ web-sys = { workspace = true, features = [
   "Storage",
   "Touch",
   "TouchEvent",
+  "PointerEvent",
   "TouchList",
   "WebGl2RenderingContext",
   "WebglDebugRendererInfo",

crates/eframe/src/web/events.rs

@@ -77,11 +77,16 @@ pub(crate) fn install_event_handlers(runner_ref: &WebRunner) -> Result<(), JsVal
     // so we check if we have focus inside of the handler.
     install_copy_cut_paste(runner_ref, &document)?;
 
-    install_mousedown(runner_ref, &canvas)?;
     // Use `document` here to notice if the user releases a drag outside of the canvas:
     // See https://github.com/emilk/egui/issues/3157
     install_mousemove(runner_ref, &document)?;
-    install_mouseup(runner_ref, &document)?;
+    if is_mobile() {
+        install_pointerup(runner_ref, &canvas)?;
+        install_pointerdown(runner_ref, &canvas)?;
+    } else {
+        install_mouseup(runner_ref, &document)?;
+        install_mousedown(runner_ref, &canvas)?;
+    }
     install_mouseleave(runner_ref, &canvas)?;
 
     install_touchstart(runner_ref, &canvas)?;
@@ -420,6 +425,83 @@ fn install_mousedown(runner_ref: &WebRunner, target: &EventTarget) -> Result<(),
     )
 }
 
+fn install_pointerdown(runner_ref: &WebRunner, target: &EventTarget) -> Result<(), JsValue> {
+    runner_ref.add_event_listener(
+        target,
+        "pointerdown",
+        |event: web_sys::PointerEvent, runner: &mut AppRunner| {
+            let modifiers = modifiers_from_mouse_event(&event);
+            runner.input.raw.modifiers = modifiers;
+            if let Some(button) = button_from_mouse_event(&event) {
+                let pos = pos_from_mouse_event(runner.canvas(), &event, runner.egui_ctx());
+                let modifiers = runner.input.raw.modifiers;
+                runner.input.raw.events.push(egui::Event::PointerButton {
+                    pos,
+                    button,
+                    pressed: true,
+                    modifiers,
+                });
+
+                // In Safari we are only allowed to write to the clipboard during the
+                // event callback, which is why we run the app logic here and now:
+                runner.logic();
+
+                // Make sure we paint the output of the above logic call asap:
+                runner.needs_repaint.repaint_asap();
+            }
+            event.stop_propagation();
+            // Note: prevent_default breaks VSCode tab focusing, hence why we don't call it here.
+        },
+    )
+}
+
+fn install_pointerup(runner_ref: &WebRunner, target: &EventTarget) -> Result<(), JsValue> {
+    runner_ref.add_event_listener(
+        target,
+        "pointerup",
+        |event: web_sys::PointerEvent, runner| {
+            let modifiers = modifiers_from_mouse_event(&event);
+            runner.input.raw.modifiers = modifiers;
+
+            let pos = pos_from_mouse_event(runner.canvas(), &event, runner.egui_ctx());
+
+            if is_interested_in_pointer_event(
+                runner,
+                egui::pos2(event.client_x() as f32, event.client_y() as f32),
+            ) {
+                if let Some(button) = button_from_mouse_event(&event) {
+                    let modifiers = runner.input.raw.modifiers;
+                    runner.input.raw.events.push(egui::Event::PointerButton {
+                        pos,
+                        button,
+                        pressed: false,
+                        modifiers,
+                    });
+
+                    // Previously on iOS, the canvas would not receive focus on
+                    // any touch event, which resulted in the on-screen keyboard
+                    // not working when focusing on a text field in an egui app.
+                    // This attempts to fix that by forcing the focus on any
+                    // click on the canvas.
+                    runner.canvas().focus().ok();
+
+                    // In Safari we are only allowed to do certain things
+                    // (like playing audio, start a download, etc)
+                    // on user action, such as a click.
+                    // So we need to run the app logic here and now:
+                    runner.logic();
+
+                    // Make sure we paint the output of the above logic call asap:
+                    runner.needs_repaint.repaint_asap();
+
+                    event.prevent_default();
+                    event.stop_propagation();
+                }
+            }
+        },
+    )
+}
+
 /// Returns true if the cursor is above the canvas, or if we're dragging something.
 /// Pass in the position in browser viewport coordinates (usually event.clientX/Y).
 fn is_interested_in_pointer_event(runner: &AppRunner, pos: egui::Pos2) -> bool {

crates/eframe/src/web/mod.rs

@@ -264,3 +264,16 @@ pub fn percent_decode(s: &str) -> String {
         .decode_utf8_lossy()
         .to_string()
 }
+
+/// Returns `true` if the app is likely running on a mobile device.
+pub(crate) fn is_mobile() -> bool {
+    fn try_is_mobile() -> Option<bool> {
+        const MOBILE_DEVICE: [&str; 6] =
+            ["Android", "iPhone", "iPad", "iPod", "webOS", "BlackBerry"];
+
+        let user_agent = web_sys::window()?.navigator().user_agent().ok()?;
+        let is_mobile = MOBILE_DEVICE.iter().any(|&name| user_agent.contains(name));
+        Some(is_mobile)
+    }
+    try_is_mobile().unwrap_or(false)
+}

crates/eframe/src/web/text_agent.rs

@@ -5,7 +5,7 @@ use std::cell::Cell;
 
 use wasm_bindgen::prelude::*;
 
-use super::{AppRunner, WebRunner};
+use super::{is_mobile, AppRunner, WebRunner};
 
 pub struct TextAgent {
     input: web_sys::HtmlInputElement,
@@ -173,16 +173,3 @@ impl Drop for TextAgent {
         self.input.remove();
     }
 }
-
-/// Returns `true` if the app is likely running on a mobile device.
-fn is_mobile() -> bool {
-    fn try_is_mobile() -> Option<bool> {
-        const MOBILE_DEVICE: [&str; 6] =
-            ["Android", "iPhone", "iPad", "iPod", "webOS", "BlackBerry"];
-
-        let user_agent = web_sys::window()?.navigator().user_agent().ok()?;
-        let is_mobile = MOBILE_DEVICE.iter().any(|&name| user_agent.contains(name));
-        Some(is_mobile)
-    }
-    try_is_mobile().unwrap_or(false)
-}