feat(OtpInput): use input instead of keydown event

[Tony-ST0754]

Link issues

fixes #7518

Summary By Copilot

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Improve OTP input behavior and keyboard handling, especially for Android keydown events.

New Features:

• Automatically advance focus to the next OTP field after entering a single valid digit and blur on completion of the last field.

Bug Fixes:

• Ensure OTP input correctly processes keydown events on Android by relying on input and keydown handlers instead of beforeinput/keyup.

Enhancements:

• Validate OTP fields to only accept single-digit numeric input and clear invalid entries.
• Simplify and streamline keyboard navigation between OTP fields using arrow keys and backspace.
• Remove unused event handlers and helper logic for cleaner OTP input event management.

[bb-auto]

Thanks for your PR, @Tony-ST0754. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[sourcery-ai]

Reviewer's Guide

Refactors the OTP input JavaScript to rely on the input event for value updates and focus management, simplifies key handling for navigation keys on keydown, and removes the beforeinput/keyup-based processing to improve Android keydown support and numeric-only behavior.

Sequence diagram for updated OTP input handling on Android

sequenceDiagram
    actor User
    participant Browser
    participant OtpInputJs as OtpInputJs
    participant DotNet as DotNetInvoker

    User->>Browser: Tap OTP input
    Browser->>OtpInputJs: focus event on bb-otp-item
    OtpInputJs->>Browser: select current input value

    User->>Browser: Press numeric key
    Browser->>OtpInputJs: keydown event
    OtpInputJs-->>Browser: allow key (no navigation key handling)
    Browser->>OtpInputJs: input event with value
    OtpInputJs->>OtpInputJs: normalize value (keep single digit)
    OtpInputJs->>OtpInputJs: validate /^
    OtpInputJs->>DotNet: setValue(invoke, method)
    alt not last input
        OtpInputJs->>Browser: focus next bb-otp-item
    else last input
        OtpInputJs->>Browser: blur current input
    end

    User->>Browser: Press Backspace/ArrowLeft
    Browser->>OtpInputJs: keydown event
    OtpInputJs->>Browser: setPrevFocus(el, target)

    User->>Browser: Press ArrowRight
    Browser->>OtpInputJs: keydown event
    OtpInputJs->>Browser: setNextFocus(el, target)

Loading

Flow diagram for updated OTP input and keydown logic

flowchart TD
    A[Input event on bb-otp-item] --> B[Check type attribute]
    B --> C{Is type number?}
    C -->|Yes| D[If value length > 1, slice to single char]
    C -->|No| E[Leave value as is]
    D --> F{Does value match single digit ^\d$?}
    E --> F
    F -->|Yes| G[Call setValue and invoke .NET method]
    G --> H{Is this last input field?}
    H -->|No| I[Focus next bb-otp-item]
    H -->|Yes| J[Blur current input]
    F -->|No| K[Clear value]

    subgraph Keydown navigation handling
        K1[Keydown event on bb-otp-item] --> K2{ctrlKey pressed?}
        K2 -->|Yes| K3[Return without handling]
        K2 -->|No| K4{Key in skipKeys Enter Tab Shift Control Alt?}
        K4 -->|Yes| K5[Do nothing]
        K4 -->|No| K6{Key Backspace or ArrowLeft?}
        K6 -->|Yes| K7[setPrevFocus]
        K6 -->|No| K8{Key ArrowRight?}
        K8 -->|Yes| K9[setNextFocus]
        K8 -->|No| K10[No additional handling]
    end

Loading

File-Level Changes

Change	Details	Files
Rework OTP input value handling and focus navigation to be driven by input events instead of beforeinput/keyup, and simplify keydown handling to only manage navigation and deletion keys for better Android compatibility.	Add a reusable list of OTP input elements and a skipKeys array for non-character keys Update the input event handler to enforce single-digit numeric input, update the bound value, and automatically move focus to the next field or blur on the last field Simplify the keydown handler to ignore modifier/skip keys, move focus left/right for arrow and backspace keys, and remove the previous processKey and keyup logic Adjust setFocus to use a slightly longer timeout and remove unused keyboard-processing helpers Update dispose to unregister only the remaining event handlers (input, keydown, focus)	src/BootstrapBlazor/Components/Input/OtpInput.razor.js

Possibly linked issues

• feat(OtpInput): use input instead of keydown event #7518: PR changes OtpInput input/keydown handling and focus logic, directly targeting the Android input issues described.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• In the keydown handler, the isNumber variable is never used and can be removed or the logic that depends on it restored to keep the handler focused and avoid confusion.
• The new skipKeys array no longer includes Delete, and the specific Delete handling in keyup was removed; if Delete is still expected to clear or move focus, consider reintroducing explicit handling for it in the new flow.
• The if (skipKeys.indexOf(e.key) > -1) { } branch in the keydown handler is effectively a no-op; either add an explicit return or simplify the condition to make the intent clearer.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In the keydown handler, the `isNumber` variable is never used and can be removed or the logic that depends on it restored to keep the handler focused and avoid confusion.
- The new `skipKeys` array no longer includes `Delete`, and the specific `Delete` handling in `keyup` was removed; if `Delete` is still expected to clear or move focus, consider reintroducing explicit handling for it in the new flow.
- The `if (skipKeys.indexOf(e.key) > -1) { }` branch in the keydown handler is effectively a no-op; either add an explicit `return` or simplify the condition to make the intent clearer.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (3d85ea6) to head (2b8ea85).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #7520   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          748       748           
  Lines        32986     32986           
  Branches      4584      4585    +1     
=========================================
  Hits         32986     32986           

Flag	Coverage Δ
BB	100.00% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.