Skip to content

Commit

Permalink
Submit input field when pressing Return (#1537)
Browse files Browse the repository at this point in the history
Community-specific part of
#897. Users can now submit
a new hostname by pressing the “Return” key.

It seems that the [`Element.click()`
method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click)
is exactly what we need in terms of behaviour, and I thought it made
more sense to make the implementation so that it “delegates” to the
button click-handler, rather than repeating the internal logic of the
latter.

To me, the event handler would be expressive and straightforward enough
to be inlined.

I also added a brief explanation in the style guide, to capture our
intent.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1537"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>
  • Loading branch information
jotaen4tinypilot authored Jul 27, 2023
1 parent 1354e91 commit 0e40e22
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 0 deletions.
5 changes: 5 additions & 0 deletions app/templates/custom-elements/change-hostname-dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,11 @@ <h3>Changing Hostname</h3>
this.elements.changeAndRestart.addEventListener("click", () => {
this._doChangeHostname();
});
this.elements.hostnameInput.addEventListener("keydown", (evt) => {
if (evt.code === "Enter") {
this.elements.changeAndRestart.click();
}
});
this.elements.cancelInitialization.addEventListener("click", () => {
this.dispatchEvent(new DialogClosedEvent());
});
Expand Down
7 changes: 7 additions & 0 deletions app/templates/styleguide.html
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,13 @@ <h2 class="section">Input</h2>
<pre>autocapitalize="off"</pre>
<pre>spellcheck="false"</pre>
</li>
<li>
If there is a call-to-action button associated with an input field,
then pressing the “Enter”/“Return” key on the keyboard should trigger
the call-to-action. The behaviour should be the same as if the button
was clicked with the mouse; that implies that the call-to-action
shouldn’t trigger in case the button is in disabled state.
</li>
<li>
If the input value is required to adhere to a certain format, use the
placeholder attribute to help the user intuitively grasp the expected
Expand Down

0 comments on commit 0e40e22

Please sign in to comment.