Textarea vnode sync bug

[pereriksson]

Is there an existing issue for this?

• I have searched the existing issues

Mithril.js Version

2.3.8

Browser and OS

Chrome 143
macOS 14.5

Project

No response

Code

https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIC2BLeALATllAHQBWYIANCAGZEQWoDaoAdgIYYRojG7wYoVELAD2rRBJ4AeMLEIAHeAAIw+WAF4AOiH7wFYVAHojAV1YKA1gHNiYjEex5CURzgJEyYHQD5pRuUV4Hy1WYUgYBCxxRhAABlQARgBmAFoEgBYAThAAX0o2Tm50Jw8ScmExCQgpdDyCkA4uHi9K8Ul4HhpzKPFlAEEFBQAKAEplYFDlZSqwFTn2RGUNCanpmdEMBXEa+FRlHQBhRJ013LW1-Ah4U3xWVfv1gDcsCAB3fbHlnwf19aubndlEw1n9phhhjpcCcqAcQAARCAYUQ6UaUUFgiEYsFwgBGpng8HEOnRjxx00mZPJ03EsCgWFglk+4w0PwWiDsm22rF2yzhx1OVJx+WxYKOXJ2EjhoumaJlyixQrFIHxhOJVHlFM161p9MZzO+qngiwgnK2kpUKyOACZBdTpiKlX9xeaeVLbSB5XKnUaTWbubyNEH+TDlAB+YHaiEAciQWCe0dJ9vWWJAiAAHsaruwSXCAGow0baos+gC6yn2IJ94OGsfjie1NZ0GazEBzsJ0eY9JeTPfJpaTYNLGPOj1Ho9CGGIyPM8GGSFEsFMXAkxFxoiQAE9KAMhqNwtA4PBoqxYgA2JIAdnqhWa6DsYAo1CqHR4eVLuSAA

Steps to Reproduce

Setup:
A Mithril component that renders two different textareas at the same place in the dom tree. This could be a form component that loads different forms depending on the current route.

1. Modify the textarea's value.
2. Click btn "Component 2".

Expected Behavior

The textarea loads the contents "V2"

Observed Behavior

The previous textarea value is shown, instead of "V2".

Context

Need a workaround where the form is padded with empty vnodes so that mithril doesn't consider the textareas being the same element.

[kfule]

This behavior seems to be the expected behavior of <textarea>, and the current version of Mithril doesn’t apply any extra handling for it (#2670 (comment)).

As a workaround, you can use m("textarea", {value: "V2"}) instead of m("textarea", "V2"), and it works correctly.
flems

[pereriksson]

Thanks for the workaround. Shouldn't the new text node replace the previous text node?

[kfule]

As you can see in the browser’s developer tools, the text node inside the <textarea> in your flems example is indeed being replaced. However, once a keypress updates the <textarea>’s value, the rendered content is driven by value, so that text node is no longer reflected in what you see.

Roughly speaking, the text node inside a <textarea> effectively serves as its default/initial value.