The cursor jumps to the beginning of the RTL sentence whenever I type and press space.
I saw the same issue in both of the following text-areas
textarea[data-type="alpha"] {
/* reset: outline, resize */
/* UI: width, max-height, min-height, background, padding, ... */
box-sizing: border-box;
/* for scroll bar */
will-change: transform;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
textarea[data-type="alpha"]::placeholder {
text-align: right;
}
textarea[data-type="beta"] {
/* reset: outline, resize */
/* UI: width, line-height, background, padding, ... */
display: block;
box-sizing: border-box;
text-align: right;
font-family: inherit;
}<textarea
data-type="alpha"
placeholder="Alpha example text"
dir="auto"
autocapitalize="sentences">
</textarea>
<textarea
data-type="beta"
placeholder="Beta example rtl text"
dir="auto"
maxlength="100">
</textarea>I'm using chrome 89.0.4389.90 on an Android device.
Here is a full reproducible fiddle at JSFiddle
update
I need the text area to support both RTL and LTR texts, and preferably not determined the direction of texts with js and add direction: rtl or ltr to the text area. cause text area may contain both text types at the same time and it will cause e.g. partners to behave oddly.
Text area is working fine with the LTR texts Text area is working fine in the desktop chrome. means that don't change the position of the cursor to the beginning.
Is there a way to fix this? I guess it is somehow related to chrome updates, but I don't know-how.