[otp field] Fix RTL arrow navigation

[atomiks]

Follow-up to #4840. OTP Field still handled slot arrow navigation as LTR, so RTL users moved to the visually wrong slot.

Root cause

OTPField.Input handled left/right keys itself and did not read DirectionProvider.

Changes

• Read Base UI direction in OTP Field inputs.
• Map previous/next arrow keys according to LTR or RTL.
• Add RTL coverage for normal and Ctrl/Cmd boundary arrow navigation.

[atomiks]

Code Review (GPT-5.5)

Approve ✅ The patch fixes the OTP RTL arrow-key bug at the right abstraction level and matches both Base UI’s RTL composite convention and native RTL input caret behavior.

1. Bugs / Issues (None)

Root Cause & Patch Assessment

The bug was that OTPField.Input owned its own arrow-key handling and always treated ArrowLeft as previous and ArrowRight as next. Reading useDirection() in packages/react/src/otp-field/input/OTPFieldInput.tsx and mapping physical keys to logical previous/next fixes the root cause without changing the existing focus math.

This is the right shape: Home/End and Backspace/Delete semantics remain unchanged, while only horizontal navigation is direction-aware.

Pattern Consistency Assessment

This matches the repo’s existing RTL pattern for horizontal composites: RTL reverses the previous/next arrow keys. It is also consistent with native RTL text input behavior. I verified in headless Chromium that a native dir="rtl" input moves the caret logically forward on ArrowLeft and logically backward on ArrowRight, which corresponds to this OTP change: ArrowLeft moves to the next slot index in RTL, ArrowRight moves to the previous slot index.

One caveat, expected for Base UI: this follows DirectionProvider, not DOM dir auto-detection. That matches the rest of the library’s direction-aware component behavior.

Test Coverage Assessment

The added RTL tests cover normal arrow movement and Ctrl/Cmd boundary movement, which are the affected branches. Validation run:

• pnpm test:jsdom OTPFieldInput --no-watch
• pnpm test:chromium OTPFieldInput --no-watch
• pnpm prettier
• pnpm eslint
• pnpm typescript
• pnpm stylelint
• git diff --check

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4847
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4847
  

commit: e94d54c

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+55B(+0.01%)	🔺+44B(+0.03%)

Details of bundle changes

Performance

Total duration: 1,138.35 ms +25.93 ms^(+2.3%) | Renders: 50 ⁽⁺⁰⁾ | Paint: 1,757.30 ms +44.08 ms^(+2.6%)

No significant changes — details

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	e94d54c
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6a0be851e30f0e0008c328e7
😎 Deploy Preview	https://deploy-preview-4847--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.