fix(react-components/text-field): placeholder direction should be RTL when the textfield is empty

[malikarami]

Bug Description
When the textfield is used with type set to tel, the placeholder direction is ltr where it should be rtl when the value is empty.

To Reproduce
Render the following textfield in your application:

import { TextField } from '@tapsioss/react-components/TextField';


<TextField
            placeholder="شماره همراه"
            type="tel"
            maxLength={11}
            value={phoneNumber}
            onChange={(e) => setPhoneNumber((e.target as HTMLInputElement).value)}
          />

Expected behavior
The placeholder should be ltr when the field is empty.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]: MacOS 14.4.1
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: react-components 0.17.1

[amir78729]

This behavior is indeed due to the default dir handling in input fields of type tel. Browsers often assume left-to-right (ltr) for phone numbers unless explicitly instructed otherwise.

To address this, you can conditionally apply the dir attribute on the <TextField /> based on your requirements. For example, if you want to force right-to-left (rtl) direction when the value is empty, you can do something like this:

<TextField
  placeholder="شماره همراه"
  type="tel"
  maxLength={11}
  dir={phoneNumber ? 'ltr' : 'rtl'}
  value={phoneNumber}
  onChange={(e) => setPhoneNumber((e.target as HTMLInputElement).value)}
/>

This way, the placeholder will align right (rtl) when empty, and the input will switch to LTR as soon as the user starts entering a number.

Additionally, you can set dir="auto". based on MDN:

dir="auto" lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.