Focus Trapping: canvas.set_onblur(fn) is respected, but focus() is not.

[Zageron]

Problem:
Active canvas should not be out of focus, would like to automatically refocus if focus is lost regardless of method.

Solution:

        {
            let onblur = Closure::wrap(Box::new(move |e: web_sys::FocusEvent| {
                log::info!("A Focus Event.");
                if let Some(target) = e.current_target() {
                    log::info!("Had a target.");
                    if let Some(canvas) = target.clone().dyn_ref::<HtmlCanvasElement>() {
                        if let Ok(res) = canvas.clone().focus() {
                            log::info!("Focused canvas.");
                        } else {
                            log::info!("Could not focus canvas.");
                        }
                    } else {
                        log::error!("Could not get canvas from target");
                    }
                } else {
                    log::error!("Could not get current target");
                }
            }) as Box<dyn FnMut(web_sys::FocusEvent)>);

            // Attach winit canvas to body element
            web_sys::window()
                .and_then(|win| win.document())
                .and_then(|doc| doc.get_element_by_id("canvas"))
                .and_then(|canvas_div: Element| {
                    let canvas: HtmlCanvasElement = window.canvas();
                    canvas.set_class_name("game");
                    canvas.set_id("rrr");
                    canvas.set_width(WIDTH);
                    canvas.set_height(HEIGHT);
                    let res = canvas_div
                        .append_child(&web_sys::Element::from(window.canvas()))
                        .ok();
                    canvas.set_onblur(Some(onblur.as_ref().unchecked_ref()));
                    canvas.set_tab_index(1);
                    canvas.focus().ok();
                    res
                });

            onblur.forget();
        }

Behaviour:

Expectation:
The focus() call should queue an event that either on the following frame or immediately refocuses the canvas.

Am I missing something critical? Is it an order of operations problem?

Thanks!

[Liamolucko]

This looks to be a quirk of the web APIs themselves. This equivalent javascript has the same problem:

<canvas tabindex="0"></canvas>
<script>
    const canvas = document.querySelector("canvas");

    canvas.addEventListener("focus", () => console.log("focused"));
    canvas.addEventListener("blur", () => console.log("unfocused"));

    canvas.addEventListener("blur", () => canvas.focus());
</script>

It works if you add a timeout:

<canvas tabindex="0"></canvas>
<script>
    const canvas = document.querySelector("canvas");

    canvas.addEventListener("focus", () => console.log("focused"));
    canvas.addEventListener("blur", () => console.log("unfocused"));

    canvas.addEventListener("blur", () => setTimeout(() => canvas.focus(), 0));
</script>

[Zageron]

Thanks very much @Liamolucko here are my results.

Learnings:
This is obnoxiously difficult to do in rust, and I'll likely just have some simple script blocks in the component that do this for me. (Likely exactly as you wrote out above.) This will likely be required because of possible CSS and transition rules that will need to be alleviated.

{
            let onblur = Closure::wrap(Box::new(move |e: web_sys::FocusEvent| {
                if let Some(target) = e.current_target() {
                    if let canvas =
                        Rc::new(target.dyn_ref::<HtmlCanvasElement>().unwrap().to_owned())
                    {
                        let focus = Closure::wrap(Box::new(move || {
                            canvas.to_owned().focus().ok();
                        }) as Box<dyn Fn()>);
                        web_sys::window().and_then(|win| {
                            win.set_timeout_with_callback_and_timeout_and_arguments_0(
                                focus.as_ref().unchecked_ref(),
                                0,
                            );
                            Some(win)
                        });
                        focus.forget();
                    } else {
                        log::error!("Could not get canvas from target");
                    }
                } else {
                    log::error!("Could not get current target");
                }
            }) as Box<dyn FnMut(web_sys::FocusEvent)>);

            // Attach winit canvas to body element
            web_sys::window()
                .and_then(|win| win.document())
                .and_then(|doc| doc.get_element_by_id("canvas"))
                .and_then(|canvas_div: Element| {
                    let canvas: HtmlCanvasElement = window.canvas();
                    canvas.set_class_name("game");
                    canvas.set_id("rrr");
                    canvas.set_width(WIDTH);
                    canvas.set_height(HEIGHT);
                    let res = canvas_div
                        .append_child(&web_sys::Element::from(window.canvas()))
                        .ok();
                    canvas.set_onblur(Some(onblur.as_ref().unchecked_ref()));
                    canvas.set_tab_index(1);
                    canvas.focus().ok();
                    res
                });

            onblur.forget();
        }