From 6ae01b66829706867ab10a3c1053e54e16541640 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 28 May 2017 17:59:41 -0400
Subject: [PATCH] coerce empty string in number/range inputs to undefined -
 closes #584

---
 src/generators/dom/visitors/Element/Binding.ts       |  2 +-
 src/shared/dom.js                                    |  4 ++++
 test/runtime/samples/binding-input-number/_config.js | 10 ++++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index 4b0cfc3d09..a1903293ef 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/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
diff --git a/src/shared/dom.js b/src/shared/dom.js
index 3c8bb78bc0..52cb0c04de 100644
--- a/src/shared/dom.js
+++ b/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;
 }
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-number/_config.js b/test/runtime/samples/binding-input-number/_config.js
index 35ab5375a2..8fd406a2c4 100644
--- a/test/runtime/samples/binding-input-number/_config.js
+++ b/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>
+		` );
 	}
 };