RactiveJS: Data-binding textarea causes "cannot call removeChild with null"

Question

JSFiddle with problem (open the console and press the button to see the error): http://jsfiddle.net/znkfemeg/1/

I'm new to Ractive, but this seems like a pretty obscure bug.

The goal is to have a readonly textarea where the text is updated when a button is pressed. The text is code so I'm using triple mustaches to escape the textcontent.

However, pressing the button throws a

Uncaught TypeError: Cannot read property 'removeChild' of null in the triple.prototype.render method on the line: return node.parentNode.removeChild(node); where node in the debugger is the textnode (aka the textcontent of the textarea).

Changing the text to other text elements (e.g. span, p) the code works fine.

var copyarea = Ractive.extend({
    template: "#ract",
    data: function() {
        return {
        	condition: 'one',
        	options: {
                 "one":"Text 1", 
   				 "two":"Text 2"   
            }
        }
    },
    isolated: false,
    oncomplete: function () {
        var component = this;

        this.on("switch", function (event) {
            if (component.get('condition') === 'one') {
                component.set('condition', 'two');
            } else {
                component.set('condition', 'one');
            }
        });
    }
});

var ui = new Ractive({
    el: 'body',
    append: true,
    template: '#templ',
    components: {
        copyarea: copyarea
    }
});

.unused {
    color: gray;
    
}

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id="ract" type="text/ractive">
<textarea>{{{options[condition]}}} </textarea>
<button on-click="switch" class="change-condition">
		{{ #if condition === 'one' }}
			<span>One</span>
		{{ else }}
			<span class="unused">Two</span>
		{{ /if }}

		{{ #if condition === 'two' }}
			<span>One</span>
		{{ else }}
			<span class="unused">Two</span>
		{{ /if }}
</button>
</script>
<script id="templ" type="text/ractive">
    <copyarea>
</script>

Is there a particular reason why textarea is not the parentNode of its textContent and is there a workaround/fix for this for RactiveJS?

Answer 1

It looks like you've found a bug – I've raised an issue on GitHub. Ractive doesn't really know what to do with HTML inside a textarea.

You could use a regular mustache instead of a triple (since you can't have elements inside a textarea anyway), and you won't get the weird error message, but nor will it update: http://jsfiddle.net/rich_harris/08pa2v3j/

So the correct workaround is to use <textarea value='{{options[condition}}'> instead: http://jsfiddle.net/rich_harris/a3e30030/