[Bug Fix] Normalize selection after every input so replace-and-advance chains

After replacing a filled slot, the browser leaves a collapsed caret
right after the edited character. Since the value is at (or stays
at) maxlength, further typing with a collapsed caret and no
selection is a no-op — the user has to press an arrow key again
between every replacement.

Fix: after onInput, re-select the character at the new caret
position as a 1-char range whenever one exists there (i.e. we're
not in true insert-mode at the end of a not-yet-full value). This
mirrors the onKeydown/onPaste selection logic so typing keeps
replacing forward without needing arrow keys in between.

Author: djalmaaraujo

docs/app/javascript/controllers/ruby_ui/input_otp_controller.js

@@ -19,6 +19,7 @@ export default class extends Controller {
     const filtered = this.filter(this.inputTarget.value).slice(0, this.lengthValue)
     if (filtered !== this.inputTarget.value) this.inputTarget.value = filtered
 
+    this.normalizeSelection()
     this.paint()
     this.dispatch("input", { detail: { value: filtered } })
     if (filtered.length === this.lengthValue) {
@@ -73,6 +74,25 @@ export default class extends Controller {
     this.paint()
   }
 
+  // After typing, replacing, or deleting, the browser leaves a collapsed
+  // caret. If it landed on a slot that already has a character (not the
+  // true insert-mode end of the value), re-select that character as a
+  // 1-char range so the next keystroke replaces it instead of being
+  // silently dropped by the native maxlength/no-selection behavior.
+  normalizeSelection() {
+    const input = this.inputTarget
+    const value = input.value
+    const s = input.selectionStart
+    const e = input.selectionEnd
+    if (s === null || e === null || s !== e) return
+
+    const isInsertMode = s === value.length && value.length < this.lengthValue
+    if (isInsertMode) return
+
+    const index = Math.min(s, this.lengthValue - 1)
+    input.setSelectionRange(index, index < value.length ? index + 1 : index)
+  }
+
   filter(raw) {
     const re = new RegExp(this.charClassValue)
     return raw.split("").filter((char) => re.test(char)).join("")

gem/lib/ruby_ui/input_otp/input_otp_controller.js

@@ -19,6 +19,7 @@ export default class extends Controller {
     const filtered = this.filter(this.inputTarget.value).slice(0, this.lengthValue)
     if (filtered !== this.inputTarget.value) this.inputTarget.value = filtered
 
+    this.normalizeSelection()
     this.paint()
     this.dispatch("input", { detail: { value: filtered } })
     if (filtered.length === this.lengthValue) {
@@ -73,6 +74,25 @@ export default class extends Controller {
     this.paint()
   }
 
+  // After typing, replacing, or deleting, the browser leaves a collapsed
+  // caret. If it landed on a slot that already has a character (not the
+  // true insert-mode end of the value), re-select that character as a
+  // 1-char range so the next keystroke replaces it instead of being
+  // silently dropped by the native maxlength/no-selection behavior.
+  normalizeSelection() {
+    const input = this.inputTarget
+    const value = input.value
+    const s = input.selectionStart
+    const e = input.selectionEnd
+    if (s === null || e === null || s !== e) return
+
+    const isInsertMode = s === value.length && value.length < this.lengthValue
+    if (isInsertMode) return
+
+    const index = Math.min(s, this.lengthValue - 1)
+    input.setSelectionRange(index, index < value.length ? index + 1 : index)
+  }
+
   filter(raw) {
     const re = new RegExp(this.charClassValue)
     return raw.split("").filter((char) => re.test(char)).join("")