diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts index 6ddc73f4da..ceadb57b7e 100644 --- a/src/generators/dom/visitors/Element/Binding.ts +++ b/src/generators/dom/visitors/Element/Binding.ts @@ -156,9 +156,26 @@ export default function visitBinding( } `); - block.builders.hydrate.addBlock( - `@addListener( ${state.parentNode}, '${eventName}', ${handler} );` - ); + if (node.name === 'input' && type === 'range') { + // need to bind to `input` and `change`, for the benefit of IE + block.builders.hydrate.addBlock(deindent` + @addListener( ${state.parentNode}, 'input', ${handler} ); + @addListener( ${state.parentNode}, 'change', ${handler} ); + `); + + block.builders.destroy.addBlock(deindent` + @removeListener( ${state.parentNode}, 'input', ${handler} ); + @removeListener( ${state.parentNode}, 'change', ${handler} ); + `); + } else { + block.builders.hydrate.addLine( + `@addListener( ${state.parentNode}, '${eventName}', ${handler} );` + ); + + block.builders.destroy.addLine( + `@removeListener( ${state.parentNode}, '${eventName}', ${handler} );` + ); + } if (node.name !== 'audio' && node.name !== 'video') { node.initialUpdate = updateElement; @@ -174,10 +191,6 @@ export default function visitBinding( `); } - block.builders.destroy.addLine( - `@removeListener( ${state.parentNode}, '${eventName}', ${handler} );` - ); - if (attribute.name === 'paused') { block.builders.create.addLine( `@addListener( ${state.parentNode}, 'play', ${handler} );` diff --git a/test/runtime/samples/binding-input-range-change/_config.js b/test/runtime/samples/binding-input-range-change/_config.js new file mode 100644 index 0000000000..dd4b5f08a1 --- /dev/null +++ b/test/runtime/samples/binding-input-range-change/_config.js @@ -0,0 +1,33 @@ +export default { + data: { + count: 42 + }, + + html: ` + +
number 42
+ `, + + test ( assert, component, target, window ) { + const input = target.querySelector( 'input' ); + assert.equal( input.value, '42' ); + + const event = new window.Event( 'change' ); + + input.value = '43'; + input.dispatchEvent( event ); + + assert.equal( component.get( 'count' ), 43 ); + assert.htmlEqual( target.innerHTML, ` + +number 43
+ ` ); + + component.set({ count: 44 }); + assert.equal( input.value, '44' ); + assert.htmlEqual( target.innerHTML, ` + +number 44
+ ` ); + } +}; diff --git a/test/runtime/samples/binding-input-range-change/main.html b/test/runtime/samples/binding-input-range-change/main.html new file mode 100644 index 0000000000..bedf924f98 --- /dev/null +++ b/test/runtime/samples/binding-input-range-change/main.html @@ -0,0 +1,2 @@ + +{{typeof count}} {{count}}