title: Using Redux-Form for search filters, how can I "reset" and re-submit the form?
body: <h2>Update: Here is an example Pen</h2>
  
  <p><a href="https://codepen.io/anon/pen/vwzGYY?editors=0011" rel="nofollow noreferrer">https://codepen.io/anon/pen/vwzGYY?editors=0011</a></p>
  
  <h2>Preface</h2>
  
  <p>Based on my research, it seems like I need a completely different approach. Maybe you can suggest one? </p>
  
  <h2>Context</h2>
  
  <p>I'm using a Redux-Form (technically an older version, but the API's 
  in question seem really stable. We can burn that bridge when we get there.) to set some "filters" for a sort of search results list. </p>
  
  <p>In particular, since I want the pages to be link-able, I'm also setting the form content in the URL query params, via React-Router, or initially setting it on page load via similar mechanism. </p>
  
  <p>The only field so far is "organization_name", a text field, used to set the query param value, and trigger an API request for <code>/endpoint?name={some_name}</code>. </p>
  
  <p>E.g., </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;Field
    name="organization_name"
    component="input"
    type="text"
    placeholder="Organization Name"
    value={value}
  /&gt;
  </code></pre>
  
  <p>I've tried several things, but here's a recent shot: </p>
  
  <p>I'm grabbing <code>reset</code>, <code>change</code>, and other things from default props. I'm passing in a <code>handleSubmit</code> as required. </p>
  
  <p><code>handleSubmit</code> works correctly, to do some state updating, set/push the URL query params with React Router, and then make a new API call/update display of new results! Woot! </p>
  
  <h2>What I want / expect</h2>
  
  <p>In the long run, I would like a "reset filters" button that sets all filter values back to defaults (e.g., set the "name" value to empty string), and <em>re-submits</em> the form (thus triggering handleSubmit). </p>
  
  <p>What I first tried to implement was a button, as such: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button
    name="reset_filters_button"
    type="button"
    onClick={resetAndSubmit}
    disabled={pristine || submitting}
    &gt;
      Clear Search
  &lt;/button&gt; 
  </code></pre>
  
  <p>Where <code>resetAndSubmit</code> is defined on the form container as such: </p>
  
  <pre><code>const resetAndSubmit = event =&gt; {
    reset();
    handleSubmit();
  };
  </code></pre>
  
  <h2>What actually happens... (submit takes precedence over dispatched events?)</h2>
  
  <p>Using the Chrome dev tools debugger, <em>I can clearly see</em> that the <code>reset</code> method is called, and returns it's <code>dispatch(...)</code>'d event. However, the form and state values are not updated <em>before</em> <code>handleSubmit()</code> runs and submits the form. </p>
  
  <p>I think this might have to do with the submit event taking priority? </p>
  
  <p><em>I have also tried</em> something janky, like importing <code>change</code> (default prop for the container) and defining the reset button thus: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button
    name="reset_filters_button"
    type="button"
    onClick={() =&gt; {
      change('organization_name', '');
      methodThatDispatchesSubmitAction();
    }}
    disabled={pristine || submitting}
  &gt;
    Clear Search
  &lt;/button&gt;
  </code></pre>
  
  <p>Which (if I remove <code>methodThatDispatchesSubmitAction()</code>) works correctly to set the field value back to blank, making the form technically "pristine" again as well. </p>
  
  <p><code>methodThatDispatchesSubmitAction()</code> (if it's not obvious) is bound on the parent via <code>dispatchToProps</code>, and passed in to the form container, where it uses the "remote submit" suggestion, e.g, </p>
  
  <pre><code>// organization_list_filter == name of the Redux-Form to submit. 
  dispatch(submit('organization_list_filter')); 
  </code></pre>
  
  <h2>TL;DR and final question:</h2>
  
  <p>How does one properly reset a form and submit its' default/empty values? </p>
  
  <p>Every time I dispatch or directly call Redux Form 'submit', it ends up submitting the form <em>before</em> clearing values from state, or the UI. <em>I have walked through this with a debugger</em> and it's not skipping my call to <code>reset</code> or <code>change</code>. It's like an async/race issue, but <em>I admit</em> I am out of my league in this particular case for sure. </p>
  
  <p>Am I just Straight Up Doing It Wrong?</p>