React-redux-form: rrf/setSubmitFailed

[ffxsam]

I'm stuck and having trouble figuring out what I'm doing wrong. Code below:

const MUITextField = createFieldClass({
  TextField: props => ({
    onChange: props.onChange,
    value: props.modelValue,
  }),
});

// ....



        attachmentEditArea = <div>
          <MUITextField model="attachmentModel.content">
            <TextField
              ref="textfield"
              hintText="Enter content here"
              multiLine
              rows={6}
              style={styles.textarea.outer}
              textareaStyle={styles.textarea.text}
            />
          </MUITextField>
          <div>
            <RaisedButton type="submit" primary label="Save" />
          </div>
        </div>;

    return (
      <Form model="attachmentModel" onSubmit={this.newAttachment}>
        <div>
          <DropDownMenu
            value={this.state.chosenType}
            onChange={this.chooseType}
          >
            {types}
          </DropDownMenu>
        </div>

        <div>
          {attachmentEditArea}
        </div>
      </Form>
   )

newAttachment() is never even called. There are no console errors, so I can't really tell what's happening here, other than in Redux I see an rrf/setSubmitFailed being dispatched.

[davidkpiano]

SET_SUBMIT_FAILED occurs on <Form> when the form state is invalid. If you're using redux-logger, can you check to see what's making the form invalid?

[ffxsam]

I've got the Redux Dev Tools Chrome extension which shows all dispatches & state. What in particular should I look for? (there's a lot!)

[davidkpiano]

Look for attachmentModelForm (or wherever you set up your formReducer for "attachmentModel"). Find where it changes from .valid = true to .valid = false

[ffxsam]

That's the really odd thing. attachmentForm.valid is always true. I don't even have any validation code.

[ffxsam]

[ffxsam]

The other fishy thing is that attachmentModel.errors is true, yet if I drill down into the details, the errors object is empty.

[davidkpiano]

Can you make a minimal code example demonstrating the issue on esnextb.in ?

[ffxsam]

Wow, cool site! I'll try to put something together in the morning.. and hope that I can replicate it. Thanks!

[ffxsam]

I can't seem to replicate it in a new project.. argh! How can I go about debugging this, any suggestions?

[davidkpiano]

In form-component.js there is a few lines of code that _should_ be called since you don't have validators:

    if (!validators && onSubmit && formValid) {
      onSubmit(modelValue);

      return modelValue;
    }

so the fact that onSubmit isn't being called means that !validators && onSubmit && formValid is falsey.

If you go into lib/components/form-component.js (if you're using Webpack) you can directly console.log() in this file to dig around and see what's going on.

Let me know if you're able to do so.

[ffxsam]

Ahh, I got it! It's because the <Field> (or in this case <MUITextField>) doesn't exist when the page first loads up, so <Form> doesn't process it. But when the user chooses the attachment type "text", it adds the <Field> but it's too late since <Form> has already traversed through its children.

(verifying..)

[ffxsam]

Nope. Bummer. I had some conditional code that would either show the field or not.. but I simplified my render's return statement to this:

return <div className="AttachmentCreator">
      <RaisedButton label="Add Attachment" onTouchTap={this.openAdd} />

      <Form
        model="attachmentModel"
        onSubmit={data => console.log(data)}
      >
        <MUITextField model="attachmentModel.content">
          <TextField
            ref="textfield"
            hintText="Enter content here"
            multiLine
            rows={6}
            style={styles.textarea.outer}
            textareaStyle={styles.textarea.text}
          />
        </MUITextField>
        <div>
          <RaisedButton type="submit" primary label="Save" />
        </div>
      </Form>
    </div>

And I'm still getting the setSubmitFailed. There's nothing fancy going on with the reducers, pretty basic. I'll try your debugging tips and see if I can figure this out.

[ffxsam]

@davidkpiano Ok, formValid is false. Very strange.

[ffxsam]

@Ok, I think a co-worker might've done something wrong. formValue.model is equal to "messageModel" which is not mine! Can you think of any reason why another model would be involved here?

[ffxsam]

Solved! Ok, maybe you can tell me what was happening here.

A co-worker of mine had another model called messageModel with a field called "content." The field name is the same as my attachmentModel.content, though this part was irrelevant.

However, he had this:

      <Form
        model="messageModel"
        validators={validators}
        onSubmit={message => this.sendMessage(message)}
      >

Validators:

const validators = {
  content: {
    filled(value) {
      return value && value.length > 0;
    },
  },
};

This validator was somehow acting globally, and preventing my form from submitting.

[ffxsam]

So it seems there's some cross-contamination between forms. messageModel's validators definitely shouldn't be evaluated when I'm submitting attachmentModel. But.. I'm gonna guess that since your code has been evolving, we can no longer use validators this way :) I should check the guide for updates.

[davidkpiano]

Weird! It's hard to diagnose the problem without a way to replicate, and there should be no cross-contamination. I'll try to see what I can find.

[ffxsam]

Well, I noticed the guide no longer demonstrates validators as a prop on <Form>.. so that might be outdated usage. I haven't tried putting validators on the <Field> instead. Honestly, since we're still in alpha, I'll probably just wait to add validators until you launch 1.0. We can't keep up with your progress! :)

[davidkpiano]

Okay - validators continue to work in <Form> so I'll help try to figure out what's going on. The unit tests should cover all possible edge cases, but I might have missed something.

[davidkpiano]

@ffxsam Were you able to work around this? I am still not able to recreate the issue without an isolated code example.

[ffxsam]

You know, it actually hasn't come up again for some reason. I'm not sure if something on your end changed or on mine.. but it's all good now :)

BTW, thanks for all the time & effort you put into react-redux-form! Much appreciated. If you're a Bitcoin user & share an address, I'm happy to send some beer money ;)

[davidkpiano]

Awesome! And no worries, I'm happy to do this for free. This project makes my life easier and (hopefully) other dev's lives easier.

[markshust]

I stumbled on this issue debugging the same issue. It turned out the submit handler I was passing through handleSubmit was doing an e.preventDefault() check that was leftover from pre-existing code. This was causing the SET_SUBMIT_FAILED action to be triggered. Once I removed the e.preventDefault() check/call from my final submit handler, all worked 👌 It would be nice if there was a verbose error message that was telling me this, instead I had to grok through the source to debug.

[davidkpiano]

Good plan @markoshust, I can do that. Can you open a separate ticket for adding that error message?