Input: align input change with native (#7258)

* Input: align change event with native ones

* test: update input:change event test

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"
     >
     </textarea>
@@ -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;

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: `
           <el-input
@@ -222,12 +223,21 @@ describe('Input', () => {
         }
       }, 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();
       });
     });