0.7, Bulma, and hydration errors

[nlfiedler]

I've been migrating my app from 0.6 to 0.7 and the latest issue is a hydration error. The following code is okay:

    let (selected_season, set_selected_season) = signal::<Option<Season>>(Some(Season::Spring));

    view! {
        <SeasonChooser
            selected_season
            set_season=move |value| {
                set_selected_season.set(value);
            }
        />
    }

But the code shown below results in a hydration error at the P element. The classes are defined by the Bulma CSS framework. Note that the only difference is the addition of the div, nav, and p elements.

    let (selected_season, set_selected_season) = signal::<Option<Season>>(Some(Season::Spring));

    view! {
        <div class="container">
            <nav class="level">
                <div class="level-left">
                    <div class="level-item">
                        <div class="field">
                            <p class="control">
                                <SeasonChooser
                                    selected_season
                                    set_season=move |value| {
                                        set_selected_season.set(value);
                                    }
                                />
                            </p>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    }

Note that this is the only component on the home page in a sample app that I created to investigate this issue.

The source for the SeasonChooser component is here: https://gist.github.com/nlfiedler/2af5814091fa3087f1200314147f6b7b

Has anyone else run into any problems with respect to 0.7 and Bulma? Or am I making a mistake that only now manifests this error in 0.7 Leptos?

[gbj]

A <div> inside a <p> is not valid HTML. If you use the code above, and look in the DOM inspector, you'll see that

<p class="control">
  <div class="dropdown"><!-- etc. --></div>
</p>

is parsed by the browser and turned into DOM nodes as if it were this

<p class="control"></p>
<div class="dropdown"><!-- etc. --></div>
<p></p>

Leptos 0.1-0.6 used a method of hydration that looked up every DOM node by a specific ID. Leptos 0.7 uses a method of hydration that walks over the DOM, looking at children and siblings. The previous version was more resilient to invalid HTML, but much, much slower. The current version is less able to handle mismatches between the HTML you write and the DOM the browser parsers, but much faster, and able to handle many more edge cases that reduce other hydration errors.

(To preemptively answer a question that has been asked before, and is a natural follow-up: No, it is not easy to statically check the validity of HTML at compile time, especially without causing some pretty big slowdowns in compile times.)

[nlfiedler]

Oh dear, now I need to become more familiar with proper HTML. I've been slapping examples from the Bulma docs together into something that looked okay, at least on the surface. Thank you for your help again.