-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Children are rendered out of order sometimes (test case included) #1035
Comments
Thank you so much for the report and testcase! I won't have time for a few days to look into this, @TheNeikos are you interested in taking a look? |
I'm not too familiar with Yew yet, but it's a good opportunity to try! |
Sweet, feel free to ask questions here! |
Alright, so I think I'm getting to the bottom of this:
This in turn, calls This is why the text "above header" is now rendered below the header. Edit: Upon further debugging, this is not the complete picture. Shame! |
@zimond At first your test-case was working, but right now I am unable to reproduce it. Can you check if this is still an issue for you? I am not sure how this could have 'fixed' itself as I reset everything. (The only thing I can imagine is a browser update in the background? But not sure how I could confirm that) |
@TheNeikos I just ran About the browser, I tested firefox nightly and chrome, the bug consists. |
Alright, then something weird is going on over here. I'll keep investigating |
@TheNeikos Hi, if you add new child to <Tabs>
<div>
<Card title="above header"/>
<h1>{"tab 1"}</h1>
</div>
<div>{"dumb 1"}</div>
<div>{"dumb 2"}</div>
<div>
<Custom content="tab 2"/>
{html!{}}
</div>
// new child
<div>
<div>{4}</div>
<div>{4.1}</div>
{html!{}}
</div>
</Tabs> The code will work as expected, because new child does not include I think the problem might be here. |
Yeah, I tried a few things. But from my debugging until I wasn't able to reproduce the error again, I was unable to pinpoint where things are going wrong. What I found was that components are rendered in a second pass, after other more simpler nodes are rendered. And it seems that the node in that moment then gets lost and things get appended at the end. But I can't confirm this, as wasm is hard to debug. No stepping etc.. |
@TheNeikos to debug source code of yew, you can add use cfg_match::cfg_match;
cfg_if! {
if #[cfg(feature = "std_web")] {
#[allow(unused_imports)]
use stdweb::{_js_impl, js};
}
}
pub fn log(message: &str) {
cfg_match! {
feature = "std_web" => js! { @(no_return) console.log(@{message}); },
};
} and then somewhere in the code just add: log("your debug string") |
|
Yeah, logging is working fine luckily! But to understand how the algorithm works and which branches it takes etc... especially with all the indirection of traits I prefer stepping through, otherwise it does make it a bit harder to see the flow. |
@TheNeikos I spent some time on this bug and I also don't know how it works:) |
Thanks for investigating! I'll take a look and see if I can give some pointers |
@jstarry and @TheNeikos I was able to trace it back to here. It looks like it's an issue since they are 2 different components being rendering. Still looking at it to see if I can figure out how to fix the issue. |
Interesting, maybe a regression caused by #983 |
@jstarry The noderefs are none on the VComp are none. I checked mounted and the vcomp node field. Looking to see if I can trace back where they are being removed. |
@jstarry Looks llike the NodeRef is returning None in Mounted and on the VComp for the ancestor node. It is correct in the scope and shows up when calling destroy. Haven't been able to figure out why it's not set in Mounted nor on the VComp. |
@jstarry I think it has something to do with the children and having the first value a VComp. I added logging statements outputting the strong count of the NodeRef and it looks like the scope has a different NodeRef since the strong_count is only 1 when it gets destroyed and it has a value set for Node. The strong count for the VComp and Mounted is 4 on the ancestor when it tries to do the update and the NodeRef isn't set. |
Power of open source collaboration 💪 |
@mrh0057 Ha! I knew that part felt wrong, I didn't think of the Rc though. Thanks for solving this and giving me some peace of mind! |
Problem
I found that sometimes yew renders children out of order. After several days of separating the behavior, I managed to create a small repo to reproduce this: https://github.com/zimond/yew_bug
Steps To Reproduce
Steps to reproduce the behavior:
npm run start
h1
element is now under the element.The required code to trigger this behavior is quite tricky. I found that you need to:
wrapper.rs#51
, this blank{html!{}}
is a must, or the disorder doesn't show upwrapper.rs
, a message need to be dispatched to trigger an update, or the disorder doesn't show upExpected behavior
The div should always be above the header
Screenshots
Before you click:
After clicking "3" & "0"
Environment:
wasm32-unknown-unknown
]stdweb
/web-sys
: web_sysQuestionnaire
The text was updated successfully, but these errors were encountered: