diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx index c4bf49d72..a5d5737d0 100644 --- a/app/soapbox/components/autosuggest-input.tsx +++ b/app/soapbox/components/autosuggest-input.tsx @@ -8,6 +8,7 @@ import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji'; import Icon from 'soapbox/components/icon'; import { Input } from 'soapbox/components/ui'; import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account'; +import { isRtl } from 'soapbox/rtl'; import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions'; import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu'; @@ -263,8 +264,15 @@ export default class AutosuggestInput extends ImmutablePureComponent @@ -283,6 +291,7 @@ export default class AutosuggestInput extends ImmutablePureComponent render() { const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, condensed, id } = this.props; const { suggestionsHidden } = this.state; + const style = { direction: 'ltr', minRows: 10 }; + + // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text. + if (isRtl(value) || (placeholder && isRtl(placeholder))) { + style.direction = 'rtl'; + } return [
@@ -250,6 +257,7 @@ class AutosuggestTextarea extends ImmutablePureComponent onFocus={this.onFocus} onBlur={this.onBlur} onPaste={this.onPaste} + style={style as any} aria-autocomplete='list' />