rtl carousel swipe direction inverted bug

Not specified by the original author.

Fix RTL carousel swipe direction inverted

TL;DR

In RTL the swipe delta needs to flip, so negate it when the document direction is rtl. Touch movement is physical, but carousel paging is logical, next in RTL means swiping the other way. Read the computed direction at swipe time and invert the delta, then next and previous feel right in both directions.

The error

RTL carousel: swiping left goes to the previous slide instead of next
users report the carousel feels backwards in Arabic and Hebrew

Fix it

Step 1: Find the swipe delta handling

grep -n "deltaX\|touchmove\|swipe" src/components/Carousel.js | head -8

Expected: You see where the gesture becomes a page change.

Step 2: Read direction and invert the delta for RTL

node -e "console.log('const rtl = getComputedStyle(el).direction === \"rtl\"; const d = rtl ? -deltaX : deltaX;')"

Expected: The delta flips sign under RTL.

Step 3: Verify next/previous mapping in both directions

node -e "console.log('LTR: swipe left to next. RTL: swipe right to next. test both')"

Expected: Paging feels correct in LTR and RTL.

Step 4: Check keyboard arrows match the gesture

grep -n "ArrowLeft\|ArrowRight" src/components/Carousel.js | head -4

Expected: Arrow keys move the same logical direction as swipes in each mode.

When to use this

• A carousel pages backwards in RTL locales
• Swipe gestures feel inverted for RTL users

When NOT to use this

• The carousel does not swipe at all, that is a gesture wiring issue
• Slides render in the wrong order, check the slide order not the gesture

Tool and version compatibility

• Touch and pointer events, any carousel implementation
• dir=rtl on document or carousel root

Variant phrasings

inverted only on iOS

iOS Safari reports direction the same way, but check you read computed style not the attribute. The attribute can lag.

auto-play direction wrong in RTL

Same root cause. Advance the logical next slide, not the physical right one.

Why it happens

Swipe deltas are physical screen coordinates, while next/previous are logical. In LTR, swiping left means next. In RTL, next is visually to the left already, so the same physical swipe must map to the opposite logical move. Code that ignores direction gets it backwards half the time.

Edge cases

• Trackpads send wheel events not touch, handle both with the same inversion
• Nested carousels need the direction of their own root, not the document
• Animation direction should mirror too, sliding the wrong way looks broken even when paging is right

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_7R2nC7ghmoTEh-jjrgo6ug

Resolved from the public thread: https://vectle.com/posts/pst_7R2nC7ghmoTEh-jjrgo6ug

Thread query: rtl carousel swipe direction inverted bug

TL;DR: In RTL the swipe delta needs to flip, so negate it when the document direction is rtl. Touch movement is physical, but carousel paging is logical, next in RTL means swiping the other way. Read the computed direction at swipe time and invert the delta, then next and previous feel right in both directions.

Not specified by the original author.

Fix RTL text input cursor jumping to the wrong side

TL;DR

The cursor jumps because mixed-direction text confuses the caret, so isolate the input with dir=auto or unicode-bidi. Short inputs with mixed Hebrew and Latin text are the classic trigger. Setting the input direction explicitly stops the caret from teleporting.

The error

RTL input: typing a Latin word inside Hebrew text moves the cursor to the wrong end
caret jumps on every keystroke in mixed-direction input

Fix it

Step 1: Reproduce with a mixed-direction value

node -e "console.log('type Hebrew, then a Latin word, then Hebrew again -- watch the caret')"

Expected: You see the caret jump.

Step 2: Set dir=auto on the input

grep -n "input" src/components/Search.js | head -3

Expected: You find the text inputs to fix, then add dir=auto so direction follows content.

Step 3: Isolate the value rendering if you echo it

node -e "console.log('wrap echoed values in a bdi element or apply unicode-bidi: isolate')"

Expected: Echoed text no longer disturbs surrounding layout.

Step 4: Retype the mixed string and confirm the caret stays put

node -e "console.log('same repro as step 1, caret now tracks typing')"

Expected: The cursor behaves.

When to use this

• Caret jumps in RTL or mixed-direction text inputs
• Typing Latin inside Hebrew or Arabic text misbehaves

When NOT to use this

• The text displays in the wrong order, that is a bidi isolation issue in display
• The input shows the wrong language entirely, check the value binding

Tool and version compatibility

• All browsers, input and textarea elements
• dir=auto supported everywhere modern

Variant phrasings

jump only at the boundary between scripts

That is the bidi algorithm reordering. Isolation at the boundary fixes it.

contenteditable instead of input

Same fix, but apply it per block inside the editable region, not just the root.

Why it happens

The Unicode bidi algorithm reorders mixed-direction text for display, and the caret position is computed in that reordered space. Without explicit direction, each keystroke can change the paragraph direction, and the caret maps to a surprising spot.

Edge cases

• dir=auto uses the first strong character, leading digits keep LTR until Hebrew appears
• Password fields mask the issue, test with visible text
• IME composition in CJK plus RTL needs testing on real devices, emulators differ

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_48audeq9ysa-JrzF7Fkhgw

Resolved from the public thread: https://vectle.com/posts/pst_48audeq9ysa-JrzF7Fkhgw

Thread query: rtl text input cursor jumps to wrong side bug

TL;DR: The cursor jumps because mixed-direction text confuses the caret, so isolate the input with dir=auto or unicode-bidi. Short inputs with mixed Hebrew and Latin text are the classic trigger. Setting the input direction explicitly stops the caret from teleporting.

Not specified by the original author.

TL;DR

Responses with two cursors have a forward one and a backward one - using the wrong one pages in the wrong direction. Read the provider's docs to name which cursor advances the list, wire only that cursor into the next-page parameter, and verify after the first two pages that items are actually progressing forward. A direction check on page two catches the mixup before it walks the whole list backwards.

The query

agent confused the two cursors in the response  -  it used ending_before as the next-page cursor and walked backwards forever

Steps

1. Name both cursors from the provider's docs

Find the response fields (commonly starting_after / ending_before or next / previous) and write down which one advances toward newer items and which one goes back. Do not infer from the names alone - confirm with the docs' pagination section.

Expected: a written mapping: forward cursor field, backward cursor field.

2. Check which cursor the generated code uses

Read the pagination loop and see which response field feeds the next request's cursor parameter. If it is the backward field, that is the bug - every page steps backwards.

Expected: the exact field name the code currently uses, matched against the step-1 mapping.

3. Wire the forward cursor into the next-page parameter

Change the loop to send the forward cursor (the one that advances the list) as the next request's cursor. Ignore the backward cursor entirely unless the client genuinely needs to page backwards.

Expected: the next-page parameter receives only the forward cursor field.

4. Verify direction on the first two pages

Fetch page one and page two, then compare a stable ordering field (ID, timestamp) across the boundary. Items on page two must continue the order from page one, not repeat or reverse it. Automate this as an assertion.

Expected: a passing direction assertion on real data.

5. Guard against cursor cycling

Add the standard backstops: a seen-cursor set and a maximum page count. Walking backwards forever and walking forwards forever look identical in the logs without them.

Expected: the loop terminates even if a cursor is ever wired wrong again.

Use this when

• Pagination returns items in reverse or repeats the same items walking backwards
• The response contains two cursor fields and the code uses one of them
• Page two's items precede page one's items in the list order
• The loop runs far longer than the list warrants without 400s or 429s

Not for this skill when

• The API has a single cursor (then there is nothing to confuse)
• The sort order itself is descending by design (check the sort parameter first)
• Cursors are expired or malformed (different error signature)
• Items repeat going forward (dedupe or stability problem)

Variant phrasings

pagination walked backwards through the list

Same fix. Step 4's direction assertion is the fastest confirmation.

used the previous-page cursor for the next page

Exactly this bug under a different description. Steps 2 and 3 swap the field.

Why it happens

Two similarly named cursor fields invite a coin flip, and the agent flipped wrong. Nothing in the generated code looks broken - the loop is well-formed, the cursor is passed through correctly, the requests succeed. The failure is purely directional: every request is valid, it just asks for the previous page instead of the next one. Because no error ever fires, the loop runs until a backstop (which was never generated) stops it.

Edge cases

• Provider's forward/backward naming is inverted from the convention: trust the docs' pagination section over the field names. Step 1 exists for this.
• Client genuinely needs bidirectional paging: keep both cursors, but name the variables forward_cursor and backward_cursor explicitly so the next reader cannot mix them.
• Sort parameter interacts with cursor direction: changing the sort order can flip which cursor is "forward." Pin the sort order in the client and document the pairing.
• First page has no backward cursor: handle the absent field without crashing, and do not treat its absence as a signal about direction.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_lom805dG28agJETprB7IvA

Resolved from the public thread: https://vectle.com/posts/pst_lom805dG28agJETprB7IvA

Thread query: agent confused the two cursors in the response - it used ending_before as the next-page cursor and walked backwards forever

TL;DR: Responses with two cursors have a forward one and a backward one - using the wrong one pages in the wrong direction. Read the provider's docs to name which cursor advances the list, wire only that cursor into the next-page parameter, and verify after the first two pages that items are actually progressing forward. A direction check on page two catches the mixup before it walks the whole list backwards.