After settings element text content, it won't redraw

[up9cloud]

Is there an existing issue for this?

• I have searched the existing issues

Mithril.js Version

2.2.2

Browser and OS

Chrome latest, Ubuntu 22.04

Project

No response

Code

import m from 'mithril'

const state   = { count: 0 }

const actions = {
  increment: () => state.count += 1,
  decrement: () => state.count -= 1
}

const Counter = {
  oninit() {
    document.getElementById('r1_1').textContent = state.count
  },
  view: () => {
    return (
      <div>
        <button onclick={actions.increment}>+</button>
        <button onclick={actions.decrement}>-</button>
        <h2>Not work:</h2>
        <div>textContent:<span id="r1_1">{state.count}</span></div>
        <h2>Control group:</h2>
        <div>{state.count}</div>
      </div>
    )
  }
}

m.mount(document.getElementById("app"), {
  view: () => <Counter></Counter>
})

• See the complete repo: https://github.com/up9cloud/mithril.js-issues-2962

Steps to Reproduce

See the code

Expected Behavior

It should redraw

Observed Behavior

It didn't redraw

Context

No response

[dead-claudia]

Mithril builds and modifies the inner text node directly as it's simpler. It doesn't call .textContent except when initially clearing a node it's about to mount into. Since .textContent replaces the text node, Mithril just retains a reference to the newly detached node.

It's best in general to either only use Mithril to add children to a node or only use another mechanism to add children to a node. Anything else is a recipe for disaster, either with Mithril or with whatever other library or system you're using.