How to let "dir" be inherited?

[nayaabkhan]

A few Radix primitives accept dir as either ltr or rtl and default to ltr.

I wonder if that is a good default considering direction could be set on a parent or root and allowed to be inherited?

Currently, I'm handling it this way:

{/* @ts-ignore: Null is required to make it inherit direction from root */}
<RadioGroup.Root dir="null" />

Is there a better way that I'm missing? Or should at least the typings allow null as changing the default would be a breaking change?

[benoitgrelard]

Hey @nayaabkhan, as it stands (in the latest public stable versions) those primitives are actually able to react to changes in inherited dir if you do not give it a dir prop.

However, this behaviour has caused a lot of people to complain about performance issues (#749) with the watching of inherited dir. So we have changed the approach recently (#1119) where there will be no explicit watching anymore, but rather be a Provider based approach. So you'll be able to provide the dir higher up to the whole tree, or some subtree, and all primitives underneath will react accordingly.

Hope that helps

✌️

[nayaabkhan]

Hey @benoitgrelard, thanks for the explanation. I don't think I still am clear about its behavior.

From your explanation, this sandbox should work even if I remove the dir="null" prop from RadioGroupDemo.js line 53?

[benoitgrelard]

I see the confusion sorry. When we did the work to refactor the direction handling, we standardised the way it was done across.
It looks like before that change RadioGroup wasn't using the old useDirection hook, therefore it wasn't reactive to change like some others (try Slider for example).

You can see here RadioGroup used to just default to ltr as you suggested:
https://github.com/radix-ui/primitives/pull/1119/files#diff-39138edb5652b34ca612c34d47986e2e8eb2c97315f178b7fe237b28e0a2aeea

So you are correct that in the stable version of RadioGroup, it currently won't work.
If you really need that, you can try updating to the latest rc instead to get the new provider behaviour.

[nayaabkhan]

That's great! Yes, Slider reacts correctly to the direction when not given any explicit value. Thanks a ton for your help!

[nayaabkhan]

Just one heads-up, you may already know: In the docs for Slider, it still shows ltr as the default for dir. Would the docs change to reflect the new behavior?

[benoitgrelard]

That is correct, the docs will reflect that: https://github.com/radix-ui/website/pull/368/files#diff-d8a37953279f940c8f94ab17c4605bac30c57acd4ece690d1f13bb18467b423cR120-R131