title: How can I trigger the right form action when the user hits enter, in a form with multiple buttons?
body: <p>I have a form I'm submitting with javascript (with react specifically, but I don't think it matters for the purposes of the question).</p>
  
  <p>The form has a few inputs and <em>two</em> buttons. One is a normal submit button, and one triggers a secondary action.</p>
  
  <p>Crucially, <strong>the secondary button comes first in the HTML order</strong> and I can't change this (not even with flexbox order).</p>
  
  <p>Frustratingly, this seems to mean that when the user finishes typing and hits enter, the <em>secondary</em> button gets triggered.</p>
  
  <p>I'm listening to the form's submit event for the primary action, which is what I would have thought hitting enter would trigger. The secondary button has a click event listener on it.</p>
  
  <p><strong>How can I make it so the form's primary action gets triggered on pressing enter?</strong></p>
  
  <p>The secondary action should only happen if the user clicks that button or explicitly focuses onto it and hits enter.</p>
  
  <p>You can think of the form as structured like this:</p>
  
  <pre><code>&lt;form onSubmit={primaryAction}&gt;
  
     &lt;input ... /&gt;
     &lt;input ... /&gt;
  
     &lt;button onClick={secondaryAction}&gt;Second action&lt;/&gt;
  
     &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've also tried:</p>
  
  <ul>
  <li>Reorganising the HTML so that the primary button comes first in the HTML order. <a href="https://stackoverflow.com/questions/16660734/html-form-with-multiple-actions">Some sources</a> say this works but it's not an option because I'm using absolute positioning on this form and futzing with the HTML order (even with flexbox order) breaks the layout.</li>
  <li>Using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter" rel="nofollow noreferrer">submitter property</a> on the form's submit event. This doesn't seem to work cross-browser yet.</li>
  </ul>
  
  <p>A good example of what I'm trying to achieve is <a href="https://deliveroo.co.uk/" rel="nofollow noreferrer">Deliveroo's home page</a>. On the version I see there's a form with one text input and two actions (use my current location and search). When you hit enter, it's the primary (search) action that gets triggered despite the button for the secondary coming first in the html order.</p>