Incorrect values returned by MountedData::get_client_rect()

[jeancf]

Problem

The first call to MountedData::get_client_rect() in onmounted returns incorrect values.

Steps To Reproduce

• create main.rs

#![allow(non_snake_case)]

use dioxus::prelude::*;
use log::LevelFilter;

fn main() {
    // Init debug
    dioxus_logger::init(LevelFilter::Debug).expect("failed to init logger");

    dioxus::launch(App);
}

#[component]
fn App() -> Element {

    rsx! {
        link { rel: "stylesheet", href: "main.css" }
        div {
            "class": "box",
            position: "absolute",
            top: "150px",
            left: "150px",
            onmounted: move |ev: Event<MountedData>| async move {
                let rect = ev.data().get_client_rect().await.unwrap();
                log::debug!("{:?}", rect);
            },
            "BOX"
        }
    }
}

• create main.css

.box {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    color: black;
}

• run dx serve
• observe [DEBUG] graph - Rect(31.6875x22.0 at (150.0, 150.0)) in the log incorrect
• change attribute to top: "200px", then back to top: "150px", for example
• observe [DEBUG] graph - Rect(102.0x102.0 at (150.0, 150.0)) in the log correct

Expected behavior

The correct dimensions are reported right away: Rect(102.0x102.0 at (150.0, 150.0)).

I think that the value of the attributes set in the css file are not taken into account correctly at the first call. If I move the width and height attributes from the css file directly into the element, the first call returns Rect(100.0x100.0 at (150.0, 150.0)) which is still incorrect but correctly takes into account the values of width and height (the difference is the border thickness, that is still set in the css file).

Environment:

• Dioxus version: 0.5.1
• Rust version: 1.77.2, stable
• OS info: Manjaro Linux - App platform: desktop

[Xapphire13]

I'm also seeing this, do you have any workaround? The only way I can get it to report the correct value is to cause the component to re-render (by updating the rsx and letting hot-reloading do its thing)

Edit: onresize seems to report the correct size, so that could be a workaround

[zoechi]

I don't know if it is related, but when I listen to onresize on parent and its child, then the parent receives two onresize callbacks one with the parent's size and then again with the child's size. In the browser the resize event doesn't bubble up.

Dioxus 0.6 desktop

[painedpineapple]

I'm seeing this as well. For my use case it's for detecting when a user clicks outside of an element (like a dropdown) so that it can take necessary actions. Workaround for now for me is to just query the ID of that element directly via document.get_element_by_id(id) and then get_bounding_client_rect() on the result of that.