From d38ab315facc53a11021c1158c144b0407715745 Mon Sep 17 00:00:00 2001
From: Jiewei Qian <wacky6@users.noreply.github.com>
Date: Tue, 2 Apr 2019 12:19:32 +0800
Subject: [PATCH] Input: update DOM dependent values on type change (#14889)

fix #14857
---
 packages/input/src/input.vue  | 10 ++++++++++
 test/unit/specs/input.spec.js | 22 ++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index 89b9bce66..9ca3a9902 100644
--- a/packages/input/src/input.vue
+++ b/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();
+        });
       }
     },
 
diff --git a/test/unit/specs/input.spec.js b/test/unit/specs/input.spec.js
index 5c26589c7..5871ffb10 100644
--- a/test/unit/specs/input.spec.js
+++ b/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');
+  });
 });