Uncaught DOMException: Element.before: The new child is an ancestor of the parent #4066
Comments
|
This is making me nuts. I copy the 'consumables' table from prod to dev and now dev crashes. I make a dummy update on the database, and it comes good. Even though nothing changed. Then I copy the table again from my prod server and it starts crashing again. Even though essentially nothing changed. I have dumped the data in various places and confirmed it is exactly the same. I have noticed it is more likely to crash if you type in the letters slowly. If I artificially add a 1 second delay in the sleep, and I type in "NUTS" fast so there is only one update, it is more likely to work. Which is the exact opposite of what I was expecting. Then if I push backspace to get "NUT" it crashes. It does seems like the transition from "NUT" to "NUTS" or "NUTS" to "NUT" is what is causing it to crash. This is literally and figuratively nuts. |
|
It seems to be related to having a conditional as the top level in a component in a loop. This will cause it to crash. table { class: "block sm:table",
thead { class: "hidden sm:table-header-group",
tr {
th { "Name" }
th { "Brand" }
th { "Unit" }
th { "Ingredients" }
th { "Comments" }
th { "Created" }
th { "Destroyed" }
}
}
tbody { class: "block sm:table-row-group",
for consumable in list.iter() {
EntryRow {
key: "{consumable.consumable.id.as_inner().to_string()}",
consumable_with_items: consumable.clone(),
selected,
dialog,
}
}
}
[...]
#[component]
fn EntryRow(
consumable_with_items: ConsumableWithItems,
dialog: Signal<ActiveDialog>,
selected: Signal<Option<ConsumableId>>,
) -> Element {
rsx! {
if true == false {
}
}
}If I do any of the following it stops it from crashing:
If I had the option I would consider putting the So I might just delete the |
Problem
With my open source code: https://github.com/brianmay/penguin_nurse
If I try to search for a consumable, e.g.:
Which is weird, makes it seem like I am doing something dodgy with the DOM. But I am only using Dioxus components.
Unfortunately, I have only been able to reproduce this on my prod server at present, still trying to get this to crash on a dev instance.
And there is another part of the code that does the same database search, only it works fine for the same searches.
I considered the possibility that there is bad data in the database, but the fact is every entry shown by the "NUTS" search is also shown by the "NUT" search. And I have also looked at the same search results using psql, and not seen anything obviously wrong.
Oh, and Chrome based browser (brave) crashes in the exact same way, but message is Chrome version:
Mobile browsers also do the same thing.
Will keep trying to investigate, but this has me stumped.
There is no reason I can think of why the child should contain the parent.
Steps To Reproduce
As above.
Expected behavior
Should not crash the browser JavaScript.
Environment:
Questionnaire
The text was updated successfully, but these errors were encountered: