diff --git a/src/components/ui/textarea/textarea.tsx b/src/components/ui/textarea/textarea.tsx index e8ddc2c7d..d1abaf2d6 100644 --- a/src/components/ui/textarea/textarea.tsx +++ b/src/components/ui/textarea/textarea.tsx @@ -2,6 +2,9 @@ import clsx from 'clsx'; import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; +import { useLocale } from 'soapbox/hooks'; +import { getTextDirection } from 'soapbox/utils/rtl'; + import Stack from '../stack/stack'; import Text from '../text/text'; @@ -52,6 +55,7 @@ const Textarea = React.forwardRef(({ }: ITextarea, ref: React.ForwardedRef) => { const length = value?.length || 0; const [rows, setRows] = useState(autoGrow ? 1 : 4); + const locale = useLocale(); const handleChange = (event: React.ChangeEvent) => { if (autoGrow) { @@ -94,6 +98,7 @@ const Textarea = React.forwardRef(({ 'text-red-600 border-red-600': hasError, 'resize-none': !isResizeable, })} + dir={value?.length ? getTextDirection(value, { fallback: locale.direction }) : undefined} /> {maxLength && (