fix(VOtpInput): move focus correctly in RTL mode

Author: J-Sek

packages/vuetify/src/components/VOtpInput/VOtpInput.tsx

@@ -199,10 +199,13 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
     }
 
     function onKeydown (e: KeyboardEvent) {
-      if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-        // Extend with our own anchor so the originally-selected slot stays included.
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
         const direction = (e.key === 'ArrowLeft' ? -1 : 1) * (isRtl.value ? -1 : 1) as -1 | 1
-        if (otp.extendSelection(direction)) {
+        const moved = e.shiftKey
+          ? otp.extendSelection(direction)
+          : otp.moveCaret(direction)
+
+        if (moved) {
           e.preventDefault()
           syncDOM()
         }
@@ -351,7 +354,6 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
           <div
             class="v-otp-input__content"
             style={[dimensionStyles.value]}
-            dir={ isRtl.value ? 'rtl' : 'ltr' }
           >
             { slots.fields ? slots.fields() : props.merged
               ? (

packages/vuetify/src/components/VOtpInput/__tests__/VOtpInput.spec.browser.tsx

@@ -102,6 +102,58 @@ describe('VOtpInput', () => {
     expect(getActiveSlotIndex()).toBe(2)
   })
 
+  it('navigates using arrows it in rtl', async () => {
+    render(() => (<VOtpInput length={ 6 } />), null, {
+      locale: { rtl: { en: true } },
+    })
+
+    await focusInput()
+    await userEvent.keyboard('1234')
+    expect(getActiveSlotIndex()).toBe(4)
+
+    for (const expected of [3, 2, 1, 0]) {
+      await userEvent.keyboard('{ArrowRight}')
+      expect(getActiveSlotIndex()).toBe(expected)
+    }
+
+    await userEvent.keyboard('{ArrowRight}') // overshoot, no-op
+    expect(getActiveSlotIndex()).toBe(0)
+
+    for (const expected of [1, 2]) {
+      await userEvent.keyboard('{ArrowLeft}')
+      expect(getActiveSlotIndex()).toBe(expected)
+    }
+
+    await userEvent.keyboard('{Delete}')
+    expect(getInput().value).toBe('124')
+    expect(getActiveSlotIndex()).toBe(2)
+  })
+
+  it('navigates using arrows it in ltr', async () => {
+    render(() => (<VOtpInput length={ 6 } />))
+
+    await focusInput()
+    await userEvent.keyboard('1234')
+    expect(getActiveSlotIndex()).toBe(4)
+
+    for (const expected of [3, 2, 1, 0]) {
+      await userEvent.keyboard('{ArrowLeft}')
+      expect(getActiveSlotIndex()).toBe(expected)
+    }
+
+    await userEvent.keyboard('{ArrowLeft}') // overshoot, no-op
+    expect(getActiveSlotIndex()).toBe(0)
+
+    for (const expected of [1, 2]) {
+      await userEvent.keyboard('{ArrowRight}')
+      expect(getActiveSlotIndex()).toBe(expected)
+    }
+
+    await userEvent.keyboard('{Delete}')
+    expect(getInput().value).toBe('124')
+    expect(getActiveSlotIndex()).toBe(2)
+  })
+
   it('removes value and goes back when using backspace', async () => {
     render(() => (<VOtpInput />))
     const input = getInput()

packages/vuetify/src/components/VOtpInput/useOtpInput.ts

@@ -76,6 +76,7 @@ export interface OtpInputContext {
   clearSelection: () => void
   selectAtEnd: () => OtpSelection
   selectSlot: (index: number) => OtpSelection
+  moveCaret: (direction: -1 | 1) => OtpSelection | null
   extendSelection: (direction: -1 | 1) => OtpSelection | null
 
   startComposition: () => void
@@ -306,6 +307,15 @@ export function useOtpInput (options: OtpInputOptions): OtpInputContext {
     return next
   }
 
+  function moveCaret (direction: -1 | 1): OtpSelection | null {
+    const current = value.value
+    if (graphemes(current).length === 0) return null
+
+    const currentSelection = selection.value
+    const currentG = currentSelection ? codeUnitsToGraphemeIndex(current, currentSelection.start) : 0
+    return selectSlot(Math.max(0, currentG + direction))
+  }
+
   function extendSelection (direction: -1 | 1): OtpSelection | null {
     const current = value.value
     const valueG = graphemes(current).length
@@ -465,6 +475,7 @@ export function useOtpInput (options: OtpInputOptions): OtpInputContext {
     clearSelection,
     selectAtEnd,
     selectSlot,
+    moveCaret,
     extendSelection,
 
     startComposition,