Input: support RTL detection on all Inputs, remove from AutosuggestInput

src/components/autosuggest-input.tsx

@@ -7,7 +7,6 @@ import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
 import { Input, Portal } from 'soapbox/components/ui';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
-import { isRtl } from 'soapbox/utils/rtl';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
@@ -264,15 +263,9 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
   render() {
     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
     const { suggestionsHidden } = this.state;
-    const style: React.CSSProperties = { direction: 'ltr' };
 
     const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
 
-    // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
-    if (isRtl(value) || (!value && placeholder && isRtl(placeholder))) {
-      style.direction = 'rtl';
-    }
-
     return [
       <div key='input' className='relative w-full'>
         <label className='sr-only'>{placeholder}</label>
@@ -291,7 +284,6 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
           onKeyUp={onKeyUp}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
-          style={style}
           aria-autocomplete='list'
           id={id}
           maxLength={maxLength}

src/components/ui/input/input.tsx

@@ -2,6 +2,9 @@ import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import { useLocale } from 'soapbox/hooks';
+import { getTextDirection } from 'soapbox/utils/rtl';
+
 import Icon from '../icon/icon';
 import SvgIcon from '../icon/svg-icon';
 import Tooltip from '../tooltip/tooltip';
@@ -45,6 +48,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
 const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
+    const locale = useLocale();
 
     const { type = 'text', icon, className, outerClassName, append, prepend, theme = 'normal', ...filteredProps } = props;
 
@@ -90,10 +94,11 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
             'text-gray-600': props.disabled,
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
             'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
-            'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append,
+            'pr-10 rtl:pl-10 rtl:pr-3': isPassword || append,
             'pl-8': typeof icon !== 'undefined',
             'pl-16': typeof prepend !== 'undefined',
           }, className)}
+          dir={typeof props.value === 'string' ? getTextDirection(props.value, { fallback: locale.direction }) : undefined}
         />
 
         {append ? (

src/hooks/useLocale.ts

@@ -2,21 +2,19 @@ import { getLocale } from 'soapbox/actions/settings';
 
 import { useAppSelector } from './useAppSelector';
 
-import type { CSSProperties } from 'react';
-
 /** Locales which should be presented in right-to-left. */
 const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
 
 interface UseLocaleResult {
   locale: string;
-  direction: CSSProperties['direction'];
+  direction: 'ltr' | 'rtl';
 }
 
 /** Get valid locale from settings. */
 const useLocale = (fallback = 'en'): UseLocaleResult => {
   const locale = useAppSelector((state) => getLocale(state, fallback));
 
-  const direction: CSSProperties['direction'] =
+  const direction: 'ltr' | 'rtl' =
     RTL_LOCALES.includes(locale)
       ? 'rtl'
       : 'ltr';

src/utils/rtl.ts

@@ -45,7 +45,7 @@ function isRtl(text: string, confidence = 0.3): boolean {
 
 interface GetTextDirectionOpts {
   /** The default direction to return if the text is empty. */
-  fallback?: 'ltr' | 'rtl';
+  fallback?: 'ltr' | 'rtl' | undefined;
   /** The confidence threshold (0-1) to use when determining the direction. */
   confidence?: number;
 }