Preact: Always re-render the textContent?

[zbinlin]

There's a test code, when change the select, the other element's textContent always re-render.

import { h, render, Component } from "preact";
/** @jsx h*/

class TestCase extends Component {
    constructor(...args) {
        super(...args);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            selectedValue: "foo",
            options: [
                "foo", "bar",
            ],
        };
    }
    handleChange(evt) {
        this.setState({
            selectedValue: evt.target.value,
        });
    }
    render() {
        return (
            <div>
                <label>Label: </label>
                <select value={this.state.selectedValue}
                        onChange={this.handleChange}>
                {
                    this.state.options.map((val, idx) => (
                        <option value={val}>{val}</option>
                    ))
                }
                </select>
                <span>another text</span>
            </div>
        );
    }
}

render(<TestCase />, document.body);


const observer = new MutationObserver(function (muts) {
    for (const mut of muts) {
        switch (mut.type) {
            case "characterData":
                console.log(mut.oldValue, mut.target);
                break;
        }
    }
});
observer.observe(document.body, {
    childList: true,
    subtree: true,
    characterData: true,
    characterDataOldValue: true,
});

[developit]

Hi @zbinlin - it seems like your browser may be an issue here? I created a JSFiddle for the code you posted, and I'm not seeing the MutationObserver report characterData changes when changing the value of the select dropdown at all:
https://jsfiddle.net/developit/hjaa3dr4/

What browser are you using, and what version of preact?

[zbinlin]

I use Firefox.
BTW, I test in chrome, it seem ok.

[developit]

Indeed! Just noticed you were a Firefox user, looks like it's only an issue there. Firefox doesn't seem to skip strictly equal assignments to TextNode#nodeValue, so we'll want to add a check around this line to fix the issue:

https://github.com/developit/preact/blob/master/src/vdom/diff.js#L57

if (dom.nodeValue != vnode) dom.nodeValue = vnode;

[zbinlin]

@developit It seem we also should be add a check around to this line:
https://github.com/developit/preact/blob/master/src/vdom/diff.js#L92

[developit]

Ahh, yup.