diff --git a/specs/Formsy-spec.js b/specs/Formsy-spec.js index c129b59..1909e6a 100755 --- a/specs/Formsy-spec.js +++ b/specs/Formsy-spec.js @@ -120,6 +120,58 @@ describe('Formsy', function () { }); + it('should allow a dynamically updated input to update the form-model', function (done) { + + var forceUpdate = null; + var model = null; + var TestInput = React.createClass({ + mixins: [Formsy.Mixin], + changeValue: function (event) { + this.setValue(event.target.value); + }, + render: function () { + return + } + }); + + var input; + var TestForm = React.createClass({ + componentWillMount: function () { + forceUpdate = this.forceUpdate.bind(this); + }, + onSubmit: function (formModel) { + model = formModel; + }, + render: function () { + input = ; + + return ( + + {input} + ); + } + }); + var form = TestUtils.renderIntoDocument(); + + // Wait before changing the input + setTimeout(function () { + form.setProps({value: 'bar'}); + + forceUpdate(function () { + // Wait for next event loop, as that does the form + setTimeout(function () { + TestUtils.Simulate.submit(form.getDOMNode()); + expect(model.test).toBe('bar'); + done(); + }, 0); + + }); + + }, 10); + + }); + + it('should invalidate a valid form if dynamically inserted input is invalid', function (done) { var forceUpdate = null; diff --git a/src/main.js b/src/main.js index 5052552..a592979 100644 --- a/src/main.js +++ b/src/main.js @@ -160,6 +160,15 @@ Formsy.Mixin = { nextProps._validate = this.props._validate; }, + componentDidUpdate: function(prevProps, prevState) { + if (this.state._isPristine) { + if (this.props.value !== prevProps.value && this.state._value === prevProps.value) { + this.state._value = this.props.value || ''; + this.props._attachToForm(this); + } + } + }, + // Detach it when component unmounts componentWillUnmount: function () { this.props._detachFromForm(this);