fix(asinput): Remove control of state.value from asInput

openedx · Dec 8, 2017 · 213b4fa · 213b4fa
2 parents a18fd5d + 8391ed4
commit 213b4fa
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx
@@ -41,7 +41,7 @@ describe('asInput()', () => {
     const wrapper = mount(<InputTestComponent {...props} />);
     expect(wrapper.find('label').text()).toEqual(props.label);
     expect(wrapper.find('#description-asInput1').text()).toEqual(props.description);
-    expect(wrapper.state('value')).toEqual(props.value);
+    expect(wrapper.prop('value')).toEqual(props.value);
   });
 
   it('creates generic prop id', () => {
@@ -81,6 +81,21 @@ describe('asInput()', () => {
     expect(wrapper.find('small').prop('id')).toEqual(`description-${testId}`);
   });
 
+  it('overrides state value when props value changes', () => {
+    const initValue = 'foofoo';
+    const newValue = 'barbar';
+    const props = {
+      ...baseProps,
+      value: initValue,
+    };
+    const wrapper = mount(<InputTestComponent {...props} />);
+    expect(wrapper.state('value')).toEqual(initValue);
+    wrapper.setProps({
+      value: newValue,
+    });
+    expect(wrapper.state('value')).toEqual(newValue);
+  });
+
   describe('fires', () => {
     it('blur handler', () => {
       const spy = jest.fn();
@@ -149,7 +164,7 @@ describe('asInput()', () => {
           const err = wrapper.find('.form-control-feedback');
           expect(err.exists()).toEqual(true);
           expect(err.text()).toEqual(validationResult.validationMessage);
-          // expect(err.hasClass('invalid-feedback')).toEqual(true);
+          expect(err.hasClass('invalid-feedback')).toEqual(true);
 
           const dangerIcon = wrapper.find('.fa-exclamation-circle');
           expect(dangerIcon.exists()).toEqual(true);

diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
@@ -46,6 +46,14 @@ const asInput = (WrappedComponent, labelFirst = true) => {
       };
     }
 
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.value !== this.props.value) {
+        this.setState({
+          value: nextProps.value,
+        });
+      }
+    }
+
     getDescriptions() {
       // possible future work: multiple feedback msgs?
       const errorId = `error-${this.state.id}`;