mirror of
https://github.com/emilk/egui.git
synced 2026-06-28 07:23:13 -04:00
eframe web: ignore keyboard events unless canvas has focus (#4718)
* Fixes https://github.com/rerun-io/rerun/issues/6638 * Related? https://github.com/emilk/egui/issues/4563 This improves how an eframe canvas works inside of a larger web page, and how it works when there are multiple eframe apps in the same page. `eframe` will set `tabindex="0"` on the canvas automatically, making it focusable. It will also set `outline: none` on the CSS, so the focused canvas won't have an ugly outline. ## Breaking changes You may wanna add this to your `index.html` to give the canvas focus on startup: ```js document.getElementById("the_canvas_id").focus(); ``` ## Test setup ```sh ./scripts/build_demo_web.sh ./scripts/start_server.sh open http://localhost:8888/multiple_apps.html ``` Then open the "Input Event History" and "Text Edit" windows ## Tested * Chromium * [x] drag-and-drop of files * Test both when a `TextEdit` is focused and when it is not: * [x] `Event::Key` * [x] `Event::Text` * [x] copy-cut-paste * [x] Wheel scroll * [x] `Event::PointerGone` * [x] Mouse drag * [x] Mouse click * [x] Mouse right-click * [x] Defocus all eframe canvas, and then start typing text * [x] Firefox (all of the above) * [x] Desktop Safari (all of the above) * [x] Mobile Safari ## Future work (pre-existing issues) * https://github.com/emilk/egui/issues/4723 * https://github.com/emilk/egui/issues/4724 * https://github.com/emilk/egui/issues/4725 * https://github.com/emilk/egui/issues/4726
This commit is contained in:
@@ -36,8 +36,12 @@ impl WebInput {
|
||||
raw_input
|
||||
}
|
||||
|
||||
/// On alt-tab and similar.
|
||||
pub fn on_web_page_focus_change(&mut self, focused: bool) {
|
||||
/// On alt-tab, or user clicking another HTML element.
|
||||
pub fn set_focus(&mut self, focused: bool) {
|
||||
if self.raw.focused == focused {
|
||||
return;
|
||||
}
|
||||
|
||||
// log::debug!("on_web_page_focus_change: {focused}");
|
||||
self.raw.modifiers = egui::Modifiers::default(); // Avoid sticky modifier keys on alt-tab:
|
||||
self.raw.focused = focused;
|
||||
|
||||
Reference in New Issue
Block a user