From c47eda8a0ac1cc7d37fccc5e5e3018b4f769f228 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 31 Aug 2022 14:31:59 -0400
Subject: [PATCH] Fix non-valid DOM attributes getting passed to input

---
 .../features/compose/components/search.tsx    | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 9c1aab765..ec7c89468 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -115,27 +115,34 @@ const Search = (props: ISearch) => {
   ];
 
   const hasValue = value.length > 0 || submitted;
-  const Component = autosuggest ? AutosuggestAccountInput : 'input';
+  const componentProps: any = {
+    className: 'block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm',
+    type: 'text',
+    id: 'search',
+    placeholder: intl.formatMessage(messages.placeholder),
+    value,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    autoFocus: autoFocus,
+  };
+
+  if (autosuggest) {
+    componentProps.onSelected = handleSelected;
+    componentProps.menu = makeMenu();
+    componentProps.autoSelect = false;
+  }
 
   return (
     <div className='w-full'>
       <label htmlFor='search' className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
 
       <div className='relative'>
-        <Component
-          className='block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm'
-          type='text'
-          id='search'
-          placeholder={intl.formatMessage(messages.placeholder)}
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onSelected={handleSelected}
-          autoFocus={autoFocus}
-          autoSelect={false}
-          menu={makeMenu()}
-        />
+        {autosuggest ? (
+          <AutosuggestAccountInput {...componentProps} />
+        ) : (
+          <input {...componentProps} />
+        )}
 
         <div
           role='button'