Textbox cursor issue with RTL

[fduraibi]

When setting the interface language to Arabic (RTL) and typing Arabic text in the text box of the chat rooms it becomes impossible to use the mouse to change the cursor location to some place in the middle of the text, or to highlight a portion of the text. The only way to edit the text is using the keyboard keys.

However, English text works, and also with English interface both English and Arabic text works fine.

How to reproduce:

• From your profile settings set the language to Arabic "العربية"
• Type some Arabic text or copy paste the following اختبار اللغة العربية مع صاروخ المحادثات
• Try to highlight some of the text, or set the mouse cursor somewhere in the middle

Also the attachment button need to be flipped (see picture)

[sampaiodiego]

I found that it is not a problem with the textbox.
the problem is that we have a floating element over the right side of the page.. that's why you cannot use your mouse to select the initial words.. but you can select the last ones, if you typed a little bit more.

As you can see it on the image:

edit: lol .. nice test text.. rofl

[fduraibi]

You are right, and I was testing it with short messages!
And that explains this weird blue box which I was seeing when trying to do "Inspect Element" from firefox.

[AdrianoCahete]

If it's a "nav animation-hidden", why this display is different than none? If this display is necessarily block, maybe z-index can fix this.

I have a question for you, @fduraibi : Make sense, for arabic language, send message icon on the left?

[fduraibi]

@AdrianoCahete I didn't get the question, what are you referring to?

for the z-index, it already has it set with value 1000. I tried increasing it to 100000 but still on top.
@sampaiodiego I think I found the problem, transform: translateX(-100%); this works for LTR as it hides this element to the left, but when it is aligned right with RTL, it pushes it to the left by 100. So in case of RTL it should be 100% instead of -100%.

[fduraibi]

Inside the rtl.less file I see the following:

    .flex-nav.hidden {
      transform: translateX(100%);
    }

but the element is actually called animated-hidden not hidden, is it a typo or there is also something else called hidden?

[sampaiodiego]

oh I see.. it used to be called only hidden.. but at some point, the hidden was renamed to animated-hidden.. but not in the rtl.less ... 😞

[fduraibi]

@sampaiodiego I created two pull requests, first one is to fix the naming issue and the second one is to flip the text area theme to match the RTL interface.

Should I close this issue or wait until the pull requests get merged?

[rodrigok]

Fixed via PRs #1539 and #1538

Thanks @fduraibi 😄