fix: ensure date/time segments are ordered correctly in RTL #7423

yihuiliao · 2024-11-21T19:15:24Z

Close #4711

Need to double check that nothing broke in #6562 with these changes.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Arabic should render in the following order:

TimeZone DayPeriod Hour:Minute Year/Month/Day

Hebrew should render in the following order:

TimeZone DayPeriod Hour:Minute Day/Month/Year

Tab order should be:

Day -> Month -> Year -> Hour -> Minute -> DayPeriod -> TimeZone

Arabic Placeholders:

يوم / شهر / سنة

Hebrew Placeholders:

שנה.חודש.יום

Also be sure to test keyboard navigation

🧢 Your Project:

rspbot · 2024-11-21T19:25:42Z

Build successful! 🎉

sadeghbarati · 2024-12-02T06:41:49Z

Hey, Thanks for working on this PR

Is this also going to fix keyboard focus management on RTL too?

For example DateField component in the storybook link, if you pick Farsi locale, in order to focus DateSegments with arrow key you need to do it opposite direction to focus next date segment

DateField with Farsi locale:
- yyyy/mm/dd (روز/ماه/سال) format is right ✅
- focus management with arrow keys is not right ❌
DatePicker and DateRangePicker with Farsi locale:
- dd/mm/yyyy (سال/ماه/روز) format is not right ❌
- focus management with arrow keys is right ✅

yihuiliao · 2024-12-02T16:05:28Z

@sadeghbarati Yes, the plan is to also correct the keyboard navigation for RTL as well. The PR is still in the early stages so there's a lot that has yet to be implemented.

rspbot · 2024-12-04T19:00:48Z

Build successful! 🎉

rspbot · 2024-12-06T16:34:29Z

Build successful! 🎉

rspbot · 2024-12-20T21:46:31Z

Build successful! 🎉

rspbot · 2025-01-08T23:57:34Z

Build successful! 🎉

rspbot · 2025-01-15T01:21:58Z

Build successful! 🎉

yihuiliao · 2025-01-15T01:24:14Z

packages/@react-aria/datepicker/src/useDateField.ts

@@ -181,6 +181,9 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
        if (props.onKeyUp) {
          props.onKeyUp(e);
        }
+      },
+      style: {
+        unicodeBidi: 'isolate'


added for DateRangePicker because things were looking a little funky without it. wraps around each datefield. see codepen for reproduction

i could update this so that it only applies in rtl locales but it also doesn't seem to have any affect for ltr locales.

yihuiliao · 2025-01-15T01:45:01Z

packages/react-aria-components/src/Popover.tsx

@@ -170,6 +173,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
        ref={ref}
        slot={props.slot || undefined}
        style={style}
+        dir={props.dir}


popovers are portaled outside which means they don't get the direction of the locale causing the keyboard navigation to behave incorrectly for rac datepickers in rtl. in v3, we wrap the popovers in a provider so this doesn't happen. happy to change the implementation if there's a better way to do this

rspbot · 2025-01-15T23:24:03Z

Build successful! 🎉

rspbot · 2025-01-17T02:44:54Z

Build successful! 🎉

yihuiliao · 2025-01-17T19:55:25Z

packages/@react-aria/datepicker/src/useDatePickerGroup.ts

@@ -104,3 +129,19 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState

  return mergeProps(pressProps, {onKeyDown});
 }
+
+function orderSegments(editableSegments: NodeListOf<Element> | undefined) {


adjacent segments might not necessarily be adjacent in the DOM. therefore, we can't just use focusPrevious and focusNext. instead, calculate their positions and use those to determine which segment to move to

rspbot · 2025-01-17T20:02:24Z

Build successful! 🎉

rspbot · 2025-01-17T20:03:01Z

Build successful! 🎉

rspbot · 2025-01-17T20:19:25Z

Build successful! 🎉

rspbot · 2025-01-17T22:59:38Z

Build successful! 🎉

rspbot · 2025-01-17T23:01:31Z

Build successful! 🎉

snowystinger · 2025-01-18T01:51:08Z

packages/@react-aria/datepicker/src/useDatePickerGroup.ts

@@ -9,6 +9,8 @@ import {usePress} from '@react-aria/interactions';
 export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<Element | null>, disableArrowNavigation?: boolean) {
  let {direction} = useLocale();
  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
+  let editableSegments: NodeListOf<Element> | undefined = ref.current?.querySelectorAll('span[role="spinbutton"], span[role="textbox"]');


this needs to be done in a useLayoutEffect and the result should be stored in a ref as other parts of state will determine if the effects needs to update

snowystinger · 2025-01-18T01:54:43Z

packages/@react-aria/datepicker/src/useDatePickerGroup.ts

+    let segmentArr = segments.map(node => {
+      return {
+        element: node as FocusableElement,
+        rectX: node?.getBoundingClientRect().left


if you run segments.filter(Boolean).map..., you may not need this ?

might need to do it the line above so you can set the type correctly

let segments = Array.from(editableSegments).filter...

snowystinger · 2025-01-19T22:23:31Z

packages/@react-aria/datepicker/src/useDatePickerGroup.ts

@@ -31,7 +33,21 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
        e.preventDefault();
        e.stopPropagation();
        if (direction === 'rtl') {
-          focusManager.focusNext();
+          if (orderedSegments) {
+            let button = ref.current?.querySelector('button');


is it possible someone could add another button to the Group? such as in RAC?
If so, it's be best to find the element by it's id if we can get that or some other more unique attribute

snowystinger · 2025-01-19T22:36:29Z

packages/@react-spectrum/datepicker/test/DateField.test.js

@@ -664,4 +664,75 @@ describe('DateField', function () {
      });
    });
  });
+
+  describe('style', () => {


I think all of these tests can be covered by chromatic

these unit tests are likely to break in unhelpful ways, as a change to the styles could result in the correct rendering and behavior, but break here

snowystinger · 2025-01-19T22:37:01Z

packages/@react-spectrum/datepicker/test/DatePicker.test.js

@@ -2334,4 +2334,70 @@ describe('DatePicker', function () {
      });
    });
  });
+
+  describe('style', () => {


in general, testing styles in a unit test is not helpful since it doesn't actually render, these are all perfect for chromatic though

snowystinger · 2025-01-19T22:42:25Z

packages/@react-spectrum/datepicker/test/DatePickerBase.test.js

+          let el = this;
+
+          if (el.getAttribute('role') === 'spinbutton') {
+            if (el.parentElement.getAttribute('data-testid') === 'end-date') {


i thought the issue with some of these was that the dom order was not in alignment with the rendered order?
this test is a good base, but should we include some tests where the order differs? I think you could use el.getAttribute('data-type') to order based on the day/month/hour/etc

snowystinger · 2025-01-19T22:46:32Z

packages/react-aria-components/stories/DatePicker.stories.tsx

@@ -92,11 +92,11 @@ export const DateRangePickerExample = () => (
    <Label style={{display: 'block'}}>Date</Label>
    <Group style={{display: 'inline-flex'}}>
      <div className={styles.field}>
-        <DateInput data-testid="date-range-picker-date-input" slot="start" style={{display: 'inline-flex'}}>
+        <DateInput data-testid="date-range-picker-date-input" slot="start" style={{display: 'inline'}}>


sort of a breaking change
what will happen to people who have used this as an example to build their DatePicker's in the past?

Also, why is the style change different from DateField.mdx?

yihuiliao added 2 commits November 21, 2024 14:09

bdo on timefield, reverse segments on timefield in datefield

bbe6191

fix lint

0716ad5

adobe deleted a comment from rspbot Nov 21, 2024

make things inline

76b8d0e

use unicode character to wrap segments

47e2af5

yihuiliao added 3 commits December 4, 2024 14:11

fix test

ef0b637

append unicode to text in hooks, update rac

b3e2f70

Merge branch 'main' into bidi-override

7b77f1e

yihuiliao added 6 commits December 17, 2024 12:53

add comment

fd5a902

Merge branch 'main' into bidi-override

d9b69a8

skip failing test for now

a9f732e

update keyboard nav

8df5ad6

update logic of how unicode is applied

679e355

fix spacing

bedf713

adobe deleted a comment from rspbot Jan 7, 2025

yihuiliao added 5 commits January 7, 2025 11:13

add comments

c2df442

update tests

9080188

undo some previous changes

2b5fb13

wrap time segments in lri, wrap fields in unicode isolate

91173c3

fix ssr test

79a8da3

adobe deleted a comment from rspbot Jan 9, 2025

yihuiliao added 2 commits January 9, 2025 17:57

fix spacing

b923904

fix css logic

ae03f3b

yihuiliao changed the title ~~wip: fix incorrect date/time order in rtl (pt 2)~~ wip: fix incorrect date/time order in rtl Jan 15, 2025

yihuiliao commented Jan 15, 2025

View reviewed changes

yihuiliao added 2 commits January 15, 2025 14:27

small css changes so that rtl will format properly

b1915c2

memo ordering of segments for keyboard navigation

af3ab18

adobe deleted a comment from rspbot Jan 15, 2025

yihuiliao added 3 commits January 15, 2025 17:15

add chromatic tests

50bb4df

fix lint

1bd410e

add tests to rsp date components

623219d

adobe deleted a comment from rspbot Jan 17, 2025

yihuiliao added 3 commits January 17, 2025 11:06

add tests to rac

ccf7def

fix tests

ccce891

Merge branch 'main' into bidi-override

2e682e2

yihuiliao commented Jan 17, 2025

View reviewed changes

remove comment

6efe67f

yihuiliao added 2 commits January 17, 2025 14:38

fix chromatic stories

0fdb98d

add chromatic story

ab2a67a

yihuiliao changed the title ~~wip: fix incorrect date/time order in rtl~~ fix incorrect date/time order in rtl Jan 17, 2025

yihuiliao changed the title ~~fix incorrect date/time order in rtl~~ fix: ensure date/time segments are ordered correctly in RTL Jan 17, 2025

yihuiliao marked this pull request as ready for review January 17, 2025 23:18

snowystinger reviewed Jan 18, 2025

View reviewed changes

snowystinger reviewed Jan 19, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: ensure date/time segments are ordered correctly in RTL #7423

fix: ensure date/time segments are ordered correctly in RTL #7423

yihuiliao commented Nov 21, 2024 •

edited

Loading

rspbot commented Nov 21, 2024

sadeghbarati commented Dec 2, 2024 •

edited

Loading

yihuiliao commented Dec 2, 2024

rspbot commented Dec 4, 2024

rspbot commented Dec 6, 2024

rspbot commented Dec 20, 2024

rspbot commented Jan 8, 2025

rspbot commented Jan 15, 2025

yihuiliao Jan 15, 2025 •

edited

Loading

yihuiliao Jan 15, 2025 •

edited

Loading

rspbot commented Jan 15, 2025

rspbot commented Jan 17, 2025

yihuiliao Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

snowystinger Jan 18, 2025

snowystinger Jan 18, 2025

snowystinger Jan 19, 2025

snowystinger Jan 19, 2025

snowystinger Jan 19, 2025

snowystinger Jan 19, 2025

snowystinger Jan 19, 2025

fix: ensure date/time segments are ordered correctly in RTL #7423

Are you sure you want to change the base?

fix: ensure date/time segments are ordered correctly in RTL #7423

Conversation

yihuiliao commented Nov 21, 2024 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Nov 21, 2024

sadeghbarati commented Dec 2, 2024 • edited Loading

yihuiliao commented Dec 2, 2024

rspbot commented Dec 4, 2024

rspbot commented Dec 6, 2024

rspbot commented Dec 20, 2024

rspbot commented Jan 8, 2025

rspbot commented Jan 15, 2025

yihuiliao Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

yihuiliao Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

rspbot commented Jan 15, 2025

rspbot commented Jan 17, 2025

Choose a reason for hiding this comment

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

rspbot commented Jan 17, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yihuiliao commented Nov 21, 2024 •

edited

Loading

sadeghbarati commented Dec 2, 2024 •

edited

Loading

yihuiliao Jan 15, 2025 •

edited

Loading

yihuiliao Jan 15, 2025 •

edited

Loading