Merge pull request #218 from edx/alasdair/fix-className-bug-in-asInput

fix(as-input): renders classNames to DOM
openedx · Apr 19, 2018 · 2cdac1a · 2cdac1a
2 parents 13d4563 + 3f62ee8
commit 2cdac1a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/InputText/InputText.test.jsx b/src/InputText/InputText.test.jsx
@@ -52,5 +52,15 @@ describe('<InputText />', () => {
       const input = wrapper.find('input').at(0);
       expect(input.prop('autoComplete')).toEqual('off');
     });
+
+    it('should render with custom classNames if set', () => {
+      const wrapper = mount(<InputText {...props} className={['first', 'last']} />);
+      expect(wrapper.find('input')).toHaveLength(1);
+
+      const input = wrapper.find('input').at(0);
+      expect(input.prop('type')).toEqual('text');
+      expect(input.hasClass('first')).toEqual(true);
+      expect(input.hasClass('last')).toEqual(true);
+    });
   });
 });
diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
@@ -207,6 +207,8 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
     }
 
     renderInput(describedBy) {
+      const { className } = this.props;
+
       return (
         <WrappedComponent
           {...this.props}
@@ -217,8 +219,8 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
               [styles['form-check-input']]: this.isGroupedInput(),
               [styles['is-invalid']]: !this.state.isValid && this.hasDangerTheme(),
             },
-            { ...this.props.className },
-          )]}
+            className,
+          ).trim()]}
           describedBy={describedBy}
           onChange={this.handleChange}
           onBlur={this.handleBlur}