Automated comment from CodeApprove ➜

⏳ Approval Pending (1 unresolved comments)
Approval will be granted automatically when all comments are resolved

In: Discussion
(optional) Submitting an input field when pressing the Return key is kind of already supported in HTML, but it requires the input to be wrapped in a <form> element. So as an alternative to adding a keydown listener, we could wrap the <input> and <button> in a <form> element to achieve the same thing in a native way, however more verbosely.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type

For example:

<form>
  <input type="text"/>
  <button  type="button">
    Change and Restart
  </button>
</form>
<script>
  document.querySelector("form").addEventListener("submit", function(event) {
    event.preventDefault();
    // Do fetch and stuff.
  })
</script>

This would obviously change our coding style going forward, but I think it might be good to make use of native functionality.

👀 @jotaen4tinypilot it's your turn please take a look

Automated comment from CodeApprove ➜

⏳ Approval Pending (1 unresolved comments)
Approval will be granted automatically when all comments are resolved

In: Discussion
Oh, small correction, button should be type="submit".

👀 @jotaen4tinypilot it's your turn please take a look

Automated comment from CodeApprove ➜

In: Discussion
Yeah, interesting question. I’m personally torn on using <form>’s in single page apps. On the one hand, they can bring useful behaviour, such as in the case we have here. On the other hand, the default behaviour can also sometimes be undesired (e.g., auto-submit on ENTER with external redirect to the current page URL, unless you prevent that); code-wise, it may also become tricky if the markup becomes more complex, because you might have to wrap the subtree into a <form> at a potentially very broad level (if the UI controls aren’t as closely together in the code as here).

I might be biased here, though. At least from my experience with React I think it’s quite common to not use <form> elements, but to wire things manually, to have most control over the behaviour and control flows.

Maybe/Potentially worth to discuss anyway. (E.g. in the next dev meeting or so?)

Automated comment from CodeApprove ➜

Approved: I have approved this change on CodeApprove and all of my comments have been resolved.