search

stimulusreflex / stimulus_reflex

Build reactive applications with the Rails tooling you already know and love.
https://docs.stimulusreflex.com
MIT License
2.28k stars 172 forks source link

Issue with doing a partial dom update #223

Closed jonathan-s closed 4 years ago

jonathan-s commented 4 years ago

Bug Report

Describe the bug

I do a partial update using the reflex-root. This is what I've got in the html code. 

data-reflex-root="#card-lesson, #card-meaning, #card-example"

After the update my html looks like this.

Screenshot 2020-05-31 at 17 43 13

It has placed the update inside #card-meaning but duplicated the most outside div. I would expect that the div called #card-meaning is entirely replaced with the new update, not that it would get nested inside it.

It seems like this could be an issue with cable_ready, or I'm possibly doing something wrong?

Versions

StimulusReflex

Javascript versions. cable_ready: 4.1.2 stimulus_reflex: 3.2.1

External tools

Browser

leastbad commented 4 years ago

Hey Jonathan! This sounds really frustrating. I'm not super familiar with your Django backend but I assume you're using something roughly equivalent to Nokogiri to do a css selector parse of the DOM?

Anyhow, I see you have ids on your container elements, which is good. Usually when I see this kind of thing, what's happening is that you're telling morphdom that onlyChildren: false. Can you make sure that you're only trying to update the children?

jonathan-s commented 4 years ago

Good point with regards to nokogiri, let me check what the implementation looked like for rails. I've already checked that onlyChildren is true.

jonathan-s commented 4 years ago

This was entirely my own doing. Thanks @leastbad for the pointer to nokogiri, which was exactly where the issue was (ie the django equivalent that I'm using).