Fix focus problems on web (#4745)

* Closes https://github.com/emilk/egui/issues/4743
* Related to https://github.com/emilk/egui/issues/4569

crates/eframe/src/web/app_runner.rs

@@ -181,13 +181,33 @@ impl AppRunner {
         self.clipped_primitives.is_some()
     }
 
+    /// Does the eframe app have focus?
+    ///
+    /// Technically: does either the canvas or the [`TextAgent`] have focus?
+    pub fn has_focus(&self) -> bool {
+        super::has_focus(self.canvas()) || self.text_agent.has_focus()
+    }
+
+    pub fn update_focus(&mut self) {
+        let has_focus = self.has_focus();
+        if self.input.raw.focused != has_focus {
+            // log::debug!("{} Focus changed to {has_focus}", self.canvas().id());
+            self.input.set_focus(has_focus);
+
+            if !has_focus {
+                // We lost focus - good idea to save
+                self.save();
+            }
+            self.egui_ctx().request_repaint();
+        }
+    }
+
     /// Runs the logic, but doesn't paint the result.
     ///
     /// The result can be painted later with a call to [`Self::run_and_paint`] or [`Self::paint`].
     pub fn logic(&mut self) {
         // We sometimes miss blur/focus events due to the text agent, so let's just poll each frame:
-        self.input
-            .set_focus(super::has_focus(self.canvas()) || self.text_agent.has_focus());
+        self.update_focus();
 
         let canvas_size = super::canvas_size_in_points(self.canvas(), self.egui_ctx());
         let mut raw_input = self.input.new_frame(canvas_size);
@@ -254,7 +274,7 @@ impl AppRunner {
             open_url,
             copied_text,
             events: _,                    // already handled
-            mutable_text_under_cursor,
+            mutable_text_under_cursor: _, // TODO(#4569): https://github.com/emilk/egui/issues/4569
             ime,
             #[cfg(feature = "accesskit")]
                 accesskit_update: _, // not currently implemented
@@ -273,7 +293,17 @@ impl AppRunner {
         #[cfg(not(web_sys_unstable_apis))]
         let _ = copied_text;
 
-        self.text_agent.set_focus(mutable_text_under_cursor);
+        if self.has_focus() {
+            // The eframe app has focus.
+            if ime.is_some() {
+                // We are editing text: give the focus to the text agent.
+                self.text_agent.focus();
+            } else {
+                // We are not editing text - give the focus to the canvas.
+                self.text_agent.blur();
+                self.canvas().focus().ok();
+            }
+        }
 
         if let Err(err) = self.text_agent.move_to(ime, self.canvas()) {
             log::error!(

crates/eframe/src/web/events.rs

@@ -103,17 +103,8 @@ fn install_blur_focus(runner_ref: &WebRunner, target: &EventTarget) -> Result<()
     // so we also poll the focus state each frame in `AppRunner::logic`.
     for event_name in ["blur", "focus"] {
         let closure = move |_event: web_sys::MouseEvent, runner: &mut AppRunner| {
-            // log::debug!("{event_name:?}");
-
-            let has_focus = event_name == "focus";
-
-            if !has_focus {
-                // We lost focus - good idea to save
-                runner.save();
-            }
-
-            runner.input.set_focus(has_focus);
-            runner.egui_ctx().request_repaint();
+            // log::debug!("{} {event_name:?}", runner.canvas().id());
+            runner.update_focus();
         };
 
         runner_ref.add_event_listener(target, event_name, closure)?;

crates/eframe/src/web/text_agent.rs

@@ -142,21 +142,25 @@ impl TextAgent {
         super::has_focus(&self.input)
     }
 
-    fn focus(&self) {
+    pub fn focus(&self) {
         if self.has_focus() {
             return;
         }
 
+        // log::debug!("Focusing text agent");
+
         if let Err(err) = self.input.focus() {
             log::error!("failed to set focus: {}", super::string_from_js_value(&err));
         };
     }
 
-    fn blur(&self) {
+    pub fn blur(&self) {
         if !self.has_focus() {
             return;
         }
 
+        // log::debug!("Blurring text agent");
+
         if let Err(err) = self.input.blur() {
             log::error!("failed to set focus: {}", super::string_from_js_value(&err));
         };