fix(direction): respect document-level dir attribute in useDirection when no DirectionProvider is present#3834
Open
ahmadaurwahaj wants to merge 1 commit intoradix-ui:mainfrom
Conversation
…when no DirectionProvider is present
🦋 Changeset detectedLatest commit: 8278551 The changes in this PR will be included in the next version bump. This PR includes changesets to release 17 packages
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 |
mazipan-wego
reviewed
Apr 2, 2026
|
|
||
| function getDocumentDirection(): Direction { | ||
| if (typeof document === 'undefined') return 'ltr'; | ||
| return document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr'; |
There was a problem hiding this comment.
Can be simplified like this @ahmadaurwahaj.
Suggested change
| return document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr'; | |
| return document.documentElement.dir || 'ltr'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #3830
Description
useDirection()currently falls back to'ltr'when noDirectionProviderexists in the React tree - completely ignoring<html dir="rtl">set at the document level. This causes every Radix component (DropdownMenu, Dialog, Popover, ScrollArea, etc.) to renderdir="ltr"on its DOM elements, overriding the document's RTL setting.Teams building Arabic, Hebrew, Persian, or Urdu apps must manually wrap their entire application in
<DirectionProvider dir="rtl">just to get correct layout - boilerplate that should not be required.Fix: Read
document.documentElement.diras a fallback before defaulting to'ltr'. Added agetDocumentDirection()helper with an SSR guard.Priority order (unchanged, additive only):
localDir>DirectionProvidercontext ><html dir>>'ltr'Why this is safe:
DirectionProviderandlocalDirstill take full precedence. Existing apps are unaffected.<html dir>is not"rtl", result is'ltr'as before.typeof document === 'undefined'guard falls back to'ltr'on the server.Tests: Added the first unit tests for the
directionpackage (6 tests) covering all priority levels - no provider + document rtl, provider overrides document, local dir overrides provider.Storybook not required: This change is to an internal hook (
useDirection) with no visual component of its own. There is no UI to demonstrate - the fix is a logic change in a single fallback value.