coerce empty string in number/range inputs to undefined - closes #584

Author: Rich-Harris

src/generators/dom/visitors/Element/Binding.ts

@@ -183,7 +183,7 @@ function getBindingValue ( generator: DomGenerator, block: Block, state: State,
 
 	// <input type='range|number' bind:value>
 	if ( type === 'range' || type === 'number' ) {
-		return `+${state.parentNode}.${attribute.name}`;
+		return `${generator.helper( 'toNumber' )}( ${state.parentNode}.${attribute.name} )`;
 	}
 
 	// everything else

src/shared/dom.js

@@ -60,4 +60,8 @@ export function getBindingGroupValue ( group ) {
 		if ( group[i].checked ) value.push( group[i].__value );
 	}
 	return value;
+}
+
+export function toNumber ( value ) {
+	return value === '' ? undefined : +value;
 }

test/runtime/samples/binding-input-number/_config.js

@@ -29,5 +29,15 @@ export default {
 			<input type='number'>
 			<p>number 44</p>
 		` );
+
+		// empty string should be treated as undefined
+		input.value = '';
+		input.dispatchEvent( event );
+
+		assert.equal( component.get( 'count' ), undefined );
+		assert.htmlEqual( target.innerHTML, `
+			<input type='number'>
+			<p>undefined undefined</p>
+		` );
 	}
 };