Input: fix invalid resize prop (#2838)

packages/input/src/calcTextareaHeight.js

@@ -1,5 +1,3 @@
-import merge from 'element-ui/src/utils/merge';
-
 let hiddenTextarea;
 
 const HIDDEN_STYLE = `
@@ -55,8 +53,7 @@ function calculateNodeStyling(node) {
 export default function calcTextareaHeight(
   targetNode,
   minRows = null,
-  maxRows = null,
-  options = null
+  maxRows = null
 ) {
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement('textarea');
@@ -99,5 +96,5 @@ export default function calcTextareaHeight(
     height = Math.min(maxHeight, height);
   }
 
-  return merge({ height: height + 'px'}, options);
+  return { height: height + 'px'};
 };

packages/input/src/input.vue

@@ -76,6 +76,7 @@
 <script>
   import emitter from 'element-ui/src/mixins/emitter';
   import calcTextareaHeight from './calcTextareaHeight';
+  import merge from 'element-ui/src/utils/merge';
 
   export default {
     name: 'ElInput',
@@ -87,7 +88,7 @@
     data() {
       return {
         currentValue: this.value,
-        textareaStyle: {}
+        textareaCalcStyle: {}
       };
     },
 
@@ -132,6 +133,9 @@
     computed: {
       validating() {
         return this.$parent.validateState === 'validating';
+      },
+      textareaStyle() {
+        return merge({}, this.textareaCalcStyle, { resize: this.resize });
       }
     },
 
@@ -158,10 +162,7 @@
         const minRows = autosize.minRows;
         const maxRows = autosize.maxRows;
 
-        const options = {
-          resize: this.resize
-        };
-        this.textareaStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows, options);
+        this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
       },
       handleFocus(event) {
         this.$emit('focus', event);

test/unit/specs/input.spec.js

@@ -105,6 +105,28 @@ describe('Input', () => {
     expect(vm.$el.querySelector('.el-textarea__inner').getAttribute('rows')).to.be.equal('3');
   });
 
+  // Github issue #2836
+  it('resize', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-input type="textarea" :resize="resize"></el-input>
+        </div>
+      `,
+      data: {
+        resize: 'none'
+      }
+    }, true);
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
+      vm.resize = 'horizontal';
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
+        done();
+      });
+    });
+  });
+
   it('autosize', done => {
     vm = createVue({
       template: `