Support autoFocus in Streamfield

app/soapbox/components/ui/streamfield/streamfield.tsx

@@ -16,6 +16,7 @@ const messages = defineMessages({
 export type StreamfieldComponent<T> = React.ComponentType<{
   value: T
   onChange: (value: T) => void
+  autoFocus: boolean
 }>;
 
 interface IStreamfield {
@@ -72,7 +73,12 @@ const Streamfield: React.FC<IStreamfield> = ({
         <Stack space={1}>
           {values.map((value, i) => value?._destroy ? null : (
             <HStack space={2} alignItems='center'>
-              <Component key={i} onChange={handleChange(i)} value={value} />
+              <Component
+                key={i}
+                onChange={handleChange(i)}
+                value={value}
+                autoFocus={i > 0}
+              />
               {values.length > minItems && onRemoveItem && (
                 <IconButton
                   iconClassName='h-4 w-4'

app/soapbox/features/group/components/group-tags-field.tsx

@@ -3,6 +3,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Input, Streamfield } from 'soapbox/components/ui';
 
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+
 const messages = defineMessages({
   hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
 });
@@ -30,12 +32,7 @@ const GroupTagsField: React.FC<IGroupTagsField> = ({ tags, onChange, onAddItem,
   );
 };
 
-interface IHashtagField {
+const HashtagField: StreamfieldComponent<string> = ({ value, onChange, autoFocus = false }) => {
-  value: string
-  onChange: (value: string) => void
-}
-
-const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
   const intl = useIntl();
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
@@ -49,6 +46,7 @@ const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
       value={value}
       onChange={handleChange}
       placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
+      autoFocus={autoFocus}
     />
   );
 };