diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue index 14b50c16e..4bbf1eef3 100644 --- a/packages/input/src/input.vue +++ b/packages/input/src/input.vue @@ -26,6 +26,7 @@ @input="handleInput" @focus="handleFocus" @blur="handleBlur" + @change="handleChange" :aria-label="label" > @@ -65,6 +66,7 @@ :style="textareaStyle" @focus="handleFocus" @blur="handleBlur" + @change="handleChange"> :aria-label="label" > @@ -182,7 +184,9 @@ const value = event.target.value; this.$emit('input', value); this.setCurrentValue(value); - this.$emit('change', value); + }, + handleChange(event) { + this.$emit('change', event.target.value); }, setCurrentValue(value) { if (value === this.currentValue) return; diff --git a/test/unit/specs/input.spec.js b/test/unit/specs/input.spec.js index 5f0195ce2..3e9ef50cd 100644 --- a/test/unit/specs/input.spec.js +++ b/test/unit/specs/input.spec.js @@ -207,6 +207,7 @@ describe('Input', () => { }); }); it('event:change', done => { + // NOTE: should be same as native's change behavior vm = createVue({ template: ` { } }, true); + const inputElm = vm.$el.querySelector('input'); + const simulateEvent = (text, event) => { + inputElm.value = text; + inputElm.dispatchEvent(new Event(event)); + }; + const spy = sinon.spy(); vm.$refs.input.$on('change', spy); - vm.input = 'b'; + // simplified test, component should emit change when native does + simulateEvent('1', 'input'); + simulateEvent('2', 'change'); vm.$nextTick(_ => { - expect(spy.withArgs('b').calledOnce).to.be.false; + expect(spy.calledWith('2')).to.be.true; + expect(spy.calledOnce).to.be.true; done(); }); });