Allow typing magic links on mobile

When typing a magic link, rather than pasting it, iOS seems to send
`keydown.enter`, and we weren't submitting the form in that case.

Changed to submit the form in either case, and use the state of the
input target to help guard against double submissions.
This commit is contained in:
Kevin McConnell
2025-12-02 19:54:20 +00:00
parent bf858c8e02
commit cdc1f9b143
2 changed files with 6 additions and 10 deletions
@@ -4,16 +4,12 @@ import { onNextEventLoopTick } from "helpers/timing_helpers"
export default class extends Controller {
static targets = [ "input" ]
submit(event) {
submit() {
onNextEventLoopTick(() => {
this.inputTarget.disabled = true
})
}
paste(event) {
onNextEventLoopTick(() => {
this.element.submit()
this.inputTarget.disabled = true
if (!this.inputTarget.disabled) {
this.element.submit()
this.inputTarget.disabled = true
}
})
}
}
+1 -1
View File
@@ -10,7 +10,7 @@
<%= form.text_field :code, required: true, class: "input center txt-align-enter txt-large",
autofocus: true, autocorrect: "off", autocapitalize: "off", spellcheck: "false", "data-1p-ignore": true,
autocomplete: "one-time-code", maxlength: "6", placeholder: "••••••", value: params[:code],
data: { magic_link_target: "input", action: "keydown.enter->magic-link#submit paste->magic-link#paste" } %>
data: { magic_link_target: "input", action: "keydown.enter->magic-link#submit paste->magic-link#submit" } %>
<% end %>
<p class="txt-small">The code you receive will work for <%= distance_of_time_in_words(MagicLink::EXPIRATION_TIME) %>.</p>