Disabled submit button until first form interaction

[rosskevin]

I am using the code from #71 to disable the submit button:

import React from 'react';
import Form from 'react-formal';

export function SubmitButton(props) {
  return (
    <Form.Trigger group="@all">
      {({ messages }) =>
         <Form.Button
             {...props}
             type='submit'
             disabled={!!Object.keys(messages).length}
         />
      }
    </Form.Trigger>
  );
}

This works, but it's a bit disruptive from a user experience:

• open the page - submit is enabled
• start typing invalid information or enter/leave a field - submit is disabled

The form is in an invalid state to start with, but given the connections to information (messages is empty initially), I'm unsure of that in the isolated scope of the button. I could render initial disabled then yield to the code above, but other page items could trigger another render making this a naive implementation.

What would be the recommended way to solve this? Preferably I'd like to initially disable the button and listen to the form for the first validation or field blur then yield to the code above.

Any thoughts?