From 61dd57ab81057af963106a04de379d2459540b9c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 4 Oct 2022 16:39:51 -0400
Subject: [PATCH] AutosuggestInput: use UI input component

---
 app/soapbox/components/autosuggest_input.tsx | 7 +++----
 app/soapbox/components/ui/input/input.tsx    | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/autosuggest_input.tsx b/app/soapbox/components/autosuggest_input.tsx
index 744160b2b..d29cd5112 100644
--- a/app/soapbox/components/autosuggest_input.tsx
+++ b/app/soapbox/components/autosuggest_input.tsx
@@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 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';
 
@@ -298,11 +299,9 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
       <div key='input' className='relative w-full'>
         <label className='sr-only'>{placeholder}</label>
 
-        <input
+        <Input
           type='text'
-          className={classNames({
-            'block w-full sm:text-sm border-gray-200 dark:border-gray-800 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:border-gray-200 dark:focus-border-gray-800 focus:ring-primary-500 focus:ring-2': true,
-          }, className)}
+          className={className}
           ref={this.setInput}
           disabled={disabled}
           placeholder={placeholder}
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index c77ae8169..06384870e 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -11,7 +11,7 @@ const messages = defineMessages({
   hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
 });
 
-interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern'> {
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */