Skip to content

fix(number-input): mirror scrubbing direction in rtl - #3504

Merged
segunadebayo merged 1 commit into
chakra-ui:mainfrom
jsabutis:fix/number-input-scrubber-rtl
Oct 21, 2026
Merged

segunadebayo merged 1 commit into
chakra-ui:mainfrom
jsabutis:fix/number-input-scrubber-rtl

Conversation

@jsabutis

Copy link
Copy Markdown
Contributor

Closes #3503

Description

The RTL flip in getMousemoveValue used two sequential checks, so the second undid the first. Under dir="rtl" scrubbing in either direction incremented the value.

Current behavior

In RTL, dragging the scrubber left or right always increments.

New behavior

  • The hint is swapped in a single step, so RTL scrubbing is mirrored as intended.
  • LTR scrubbing is unchanged.
  • Added a dir control to the number input examples and an e2e test that scrubs both ways in RTL. It fails on main and passes with the fix. scrubBy now takes negative offsets.
  • Added a patch changeset for @zag-js/number-input.

Is this a breaking change (Yes/No):

No

Additional Information

  • Number input e2e tests pass on React (43 passed, 2 skipped). A few existing typing tests (selection replacement, backspace, decimal point) are flaky at the same rate on main. Number input typecheck and lint pass.

getMousemoveValue flipped the hint with two sequential checks. Under
dir="rtl" the first turned "increment" into "decrement" and the second
turned it straight back, while "decrement" became "increment". Dragging
the scrubber either way always incremented the value.

Swap the hint in a single step.

Fixes chakra-ui#3503

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Oct 19, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1b8f851

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 85 packages
Name Type
@zag-js/number-input Patch
@zag-js/anatomy-icons Patch
@zag-js/anatomy Patch
@zag-js/core Patch
@zag-js/docs Patch
@zag-js/preact Patch
@zag-js/react Patch
@zag-js/solid Patch
@zag-js/svelte Patch
@zag-js/vanilla Patch
@zag-js/vue Patch
@zag-js/accordion Patch
@zag-js/angle-slider Patch
@zag-js/async-list Patch
@zag-js/avatar Patch
@zag-js/carousel Patch
@zag-js/cascade-select Patch
@zag-js/checkbox Patch
@zag-js/clipboard Patch
@zag-js/collapsible Patch
@zag-js/color-picker Patch
@zag-js/combobox Patch
@zag-js/date-input Patch
@zag-js/date-picker Patch
@zag-js/dialog Patch
@zag-js/drawer Patch
@zag-js/editable Patch
@zag-js/file-upload Patch
@zag-js/floating-panel Patch
@zag-js/hover-card Patch
@zag-js/image-cropper Patch
@zag-js/listbox Patch
@zag-js/marquee Patch
@zag-js/menu Patch
@zag-js/navigation-menu Patch
@zag-js/pagination Patch
@zag-js/password-input Patch
@zag-js/pin-input Patch
@zag-js/popover Patch
@zag-js/presence Patch
@zag-js/progress Patch
@zag-js/qr-code Patch
@zag-js/radio-group Patch
@zag-js/rating-group Patch
@zag-js/scroll-area Patch
@zag-js/select Patch
@zag-js/signature-pad Patch
@zag-js/slider Patch
@zag-js/splitter Patch
@zag-js/steps Patch
@zag-js/switch Patch
@zag-js/tabs Patch
@zag-js/tags-input Patch
@zag-js/timer Patch
@zag-js/toast Patch
@zag-js/toc Patch
@zag-js/toggle-group Patch
@zag-js/toggle Patch
@zag-js/tooltip Patch
@zag-js/tour Patch
@zag-js/tree-view Patch
@zag-js/store Patch
@zag-js/types Patch
@zag-js/aria-hidden Patch
@zag-js/auto-resize Patch
@zag-js/collection Patch
@zag-js/color-utils Patch
@zag-js/utils Patch
@zag-js/date-utils Patch
@zag-js/dismissable Patch
@zag-js/dom-query Patch
@zag-js/file-utils Patch
@zag-js/focus-trap Patch
@zag-js/focus-visible Patch
@zag-js/highlight-word Patch
@zag-js/hotkeys Patch
@zag-js/i18n-utils Patch
@zag-js/interact-outside Patch
@zag-js/json-tree-utils Patch
@zag-js/live-region Patch
@zag-js/popper Patch
@zag-js/rect-utils Patch
@zag-js/remove-scroll Patch
@zag-js/scroll-snap Patch
@zag-js/stringify-state Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
zag-nextjs Ready Ready Preview Oct 19, 2026 9:38pm UTC
zag-solid Ready Ready Preview Oct 19, 2026 9:38pm UTC
zag-svelte Ready Ready Preview Oct 19, 2026 9:38pm UTC
zag-vue Ready Ready Preview Oct 19, 2026 9:38pm UTC
1 Skipped Deployment
Project Deployment Actions Updated
zag-website Ignored Ignored Preview Oct 19, 2026 9:38pm UTC

Request Review

This branch was successfully deployed

4 active deployments
Preview – zag-solid — 1b8f8514 Deployed Oct 19, 2026 by vercel[bot]
Preview – zag-vue — 1b8f8514 Deployed Oct 19, 2026 by vercel[bot]
Preview – zag-svelte — 1b8f8514 Deployed Oct 19, 2026 by vercel[bot]
Preview – zag-nextjs — 1b8f8514 Deployed Oct 19, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Number input: scrubbing always increments the value when dir is rtl

2 participants