Input: update DOM dependent values on type change (#14889)

fix #14857

packages/input/src/input.vue

@@ -233,6 +233,16 @@
       // see: https://github.com/ElemeFE/element/issues/14521
       nativeInputValue() {
         this.setNativeInputValue();
+      },
+      // when change between <input> and <textarea>,
+      // update DOM dependent value and styles
+      // https://github.com/ElemeFE/element/issues/14857
+      type() {
+        this.$nextTick(() => {
+          this.setNativeInputValue();
+          this.resizeTextarea();
+          this.updateIconOffset();
+        });
       }
     },
 

test/unit/specs/input.spec.js

@@ -394,4 +394,26 @@ describe('Input', () => {
       expect(vm.$refs.inputComp.$refs.input.selectionEnd).to.equal(testContent.length);
     });
   });
+
+  it('sets value on textarea / input type change', async() => {
+    vm = createVue({
+      template: `
+        <el-input :type="type" v-model="val" />
+      `,
+      data() {
+        return {
+          type: 'text',
+          val: '123'
+        };
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('input').value).to.equal('123');
+    vm.type = 'textarea';
+    await waitImmediate();
+    expect(vm.$el.querySelector('textarea').value).to.equal('123');
+    vm.type = 'password';
+    await waitImmediate();
+    expect(vm.$el.querySelector('input').value).to.equal('123');
+  });
 });