Fields components ways reverse in RTL

[fakhamatia]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Click month in input
2. Press Left Arrow Key and Date input select
3. Cursor move to right and year selected

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

codesandbox /rtl route

Order ID or Support key 💳 (optional)

No response

[alexfauquette]

@fakhamatia You forget to copy the link to your live example. Could you provide a codesandbox such that we are sure we discuss the same issue?

[fakhamatia]

@fakhamatia You forget to copy the link to your live example. Could you provide a codesandbox such that we are sure we discuss the same issue?

I added the link

[alexfauquette]

Seems their is some issue about private repo

[fakhamatia]

Seems their is some issue about private repo

I think it was fixed this time

[alexfauquette]

Thanks, The problem seems to occur when setting the direction: 'rtl' in the Theme provider

Here is a simpler reproduction: https://codesandbox.io/s/small-snowflake-83q1fv?file=/index.tsx

[fakhamatia]

I know. I want to remain direction: 'rtl' because I need it theme to be rtl How Can I fix this?

[alexfauquette]

You can not, it's a bug on our side, I'm going to fix. The previous message was here to provide simpler example to investigate if other member of the community needs to discuss this bug, or ensure they are facing the same

[fakhamatia]

Thank you for fixing this. But I still have problem in DateTimePicker with Weekday. I updated Repo

[alexfauquette]

It's not the same bug.

Here is a smaller reproduction. The first DateTimePicker has the format of your example. Notice that tokens are displayed in the field, even if you provided a defaultValue (we should see the value, not the token in such case)

https://codesandbox.io/s/small-snowflake-83q1fv?file=/demo.tsx

The adapter does not handle those tokens, so it assumes they are text to display (not tokens). By replacing yyyy by iYYYY and MM by iMM the keyboard navigation get fixed

Supported tokens are defined by formatTokenMap in AdapterMomentHijri/index.ts. Maybe they should be merged with AdapterMoment/index.ts

Are they you have use-cases where you need to access both YYYY and iYYYY?

[fakhamatia]

It's not the same bug.

Here is a smaller reproduction. The first DateTimePicker has the format of your example. Notice that tokens are displayed in the field, even if you provided a defaultValue (we should see the value, not the token in such case)

https://codesandbox.io/s/small-snowflake-83q1fv?file=/demo.tsx

The adapter does not handle those tokens, so it assumes they are text to display (not tokens). By replacing yyyy by iYYYY and MM by iMM the keyboard navigation get fixed

Supported tokens are defined by formatTokenMap in AdapterMomentHijri/index.ts. Maybe they should be merged with AdapterMoment/index.ts

Are they you have use-cases where you need to access both YYYY and iYYYY?

I don't understand. My problem is not adapter, it is Field order move.iYYYY not support by Jalali.

Format : yyyy/MM/dd EEEE HH:mm:ss

Screencast from 04-11-2023 06:35:07 PM.webm

Theme is direction: "rtl" but I set direction: "ltr" for date input

[alexfauquette]

Effectively, date-fns-jalali adapter suport those tokens.

I don't understand what you mean by

Theme is direction: "rtl" but I set direction: "ltr" for date input

Here is a codesandbox with the working eqmple. I guess you forget to set the attribute dir=rtl (that's why test is left aligned in the input of your video)

https://codesandbox.io/s/condescending-roentgen-f2flfo?file=/demo.tsx

If it's not the case, could you provide a reproduction with the code of the codesandbox above. Their is a lot of useless elements in your examples (routing, other fields, ...) and it takes time to find relevant information for the debug in it