How can I make email that starts with digit to look properly on RTL not test-mail.com@000?

I have a problem with emails that have only digits in first part of the email for example 1892813@testdomain.com in rtl direction. Even the app using rtl direction in Arabic version of it I would like to stick with ltr direction for the emails. The only problem is that with numeric based first part of the email it looks bad inside of input,

The example code

<b-input
    class="custom-input"
    dir="rtl"
    type="e-mail"
    :value="value"
    @input="handleInput"
  ></b-input>
.custom-input {
  [dir="ltr"] & {
    unicode-bidi: bidi-override;
    direction: ltr;
    text-align: left;
  }

  [dir="rtl"] & {
    unicode-bidi: bidi-override;
    direction: ltr;
    text-align: left;
  }
}

So when rtl direction is set for entire app I would like to have value inside of input 0000@testmail.com instead of test-mail.com@000

Example sandbox with input https://codesandbox.io/s/stoic-leakey-tnd7h?file=/src/App.vue

58 thoughts on “How can I make email that starts with digit to look properly on RTL not test-mail.com@000?”

Leave a Comment