Support RTL text in the input fields (#720)

* Support RTL text in the room input field

set the correct direction for text according to the language written in

* Make all input RTLable

Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>

diff --git a/src/app/atoms/input/Input.jsx b/src/app/atoms/input/Input.jsx
index d9f79eb003275151217a8216aa9cad599bd6923b..96c94967f827131efbe64a5a40f49c06a1ef1256 100644 (file)
--- a/src/app/atoms/input/Input.jsx
+++ b/src/app/atoms/input/Input.jsx
@@ -16,6 +16,7 @@ function Input({
       { resizable
         ? (
           <TextareaAutosize
+            dir="auto"
             style={{ minHeight: `${minHeight}px` }}
             name={name}
             id={id}
@@ -34,6 +35,7 @@ function Input({
           />
         ) : (
           <input
+            dir="auto"
             ref={forwardRef}
             id={id}
             name={name}

diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index 63870131aba74a983e862e545c18ab5f3d1392ee..1f31eadb4a8fa1764aae9f1a8b3962e9a91d6e2c 100644 (file)
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -337,6 +337,7 @@ function RoomViewInput({
           <ScrollView autoHide>
             <Text className="room-input__textarea-wrapper">
               <TextareaAutosize
+                dir="auto"
                 id="message-textarea"
                 ref={textAreaRef}
                 onChange={handleMsgTyping}