use input events for two-way binding with textareas and non-checkbox/radio inputs (#10)

Author: Rich-Harris

src/generators/dom/visitors/attributes/binding/index.js

@@ -33,13 +33,18 @@ export default function createBinding ( generator, node, attribute, current, loc
 
 	let eventName = 'change';
 	if ( node.name === 'input' ) {
-		const type = node.attributes.find( attr => attr.type === 'Attribute' && attr.name === 'type' );
-		if ( !type || type.value[0].data === 'text' ) {
-			// TODO in validation, should throw if type attribute is not static
+		const typeAttribute = node.attributes.find( attr => attr.type === 'Attribute' && attr.name === 'type' );
+		const type = typeAttribute ? typeAttribute.value[0].data : 'text'; // TODO in validation, should throw if type attribute is not static
+
+		if ( type !== 'checkbox' && type !== 'radio' ) {
 			eventName = 'input';
 		}
 	}
 
+	else if ( node.name === 'textarea' ) {
+		eventName = 'input';
+	}
+
 	let value;
 
 	if ( local.isComponent ) {

test/generator/binding-textarea/_config.js

@@ -0,0 +1,32 @@
+export default {
+	data: {
+		value: 'some text'
+	},
+
+	html: `
+		<textarea></textarea>
+		<p>some text</p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const textarea = target.querySelector( 'textarea' );
+		assert.equal( textarea.value, 'some text' );
+
+		const event = new window.Event( 'input' );
+
+		textarea.value = 'hello';
+		textarea.dispatchEvent( event );
+
+		assert.htmlEqual( target.innerHTML, `
+			<textarea></textarea>
+			<p>hello</p>
+		` );
+
+		component.set({ value: 'goodbye' });
+		assert.equal( textarea.value, 'goodbye' );
+		assert.htmlEqual( target.innerHTML, `
+			<textarea></textarea>
+			<p>goodbye</p>
+		` );
+	}
+};

test/generator/binding-textarea/main.html

@@ -0,0 +1,2 @@
+<textarea bind:value></textarea>
+<p>{{value}}</p>