From 5c90517d40497562fc4388c1317f7c6c7da67838 Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Tue, 28 Jun 2022 11:01:29 -0300
Subject: [PATCH 1/2] fix autofocus

---
 .../Community/CommunityEditorDetails.js        | 18 +++++++++++++++++-
 .../src/components/CommunityCreate/StepTwo.js  |  2 ++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/client/src/components/Community/CommunityEditorDetails.js b/frontend/packages/client/src/components/Community/CommunityEditorDetails.js
index 49a3ed9b9..662ec5430 100644
--- a/frontend/packages/client/src/components/Community/CommunityEditorDetails.js
+++ b/frontend/packages/client/src/components/Community/CommunityEditorDetails.js
@@ -10,6 +10,15 @@ import useFlowAddrValidator, {
 } from './hooks/useFlowAddrValidator';
 import FadeIn from 'components/FadeIn';
 
+const determineAutoFocus = (listLength, index, addr, autoFocusOnLoad) => {
+  return (
+    // fist element of list depends on configuration (autoFocusOnLoad)
+    (listLength === 1 && addr === '' && autoFocusOnLoad) ||
+    // new elements on list will be autofocus by default
+    (listLength === index + 1 && addr === '' && index !== 0)
+  );
+};
+
 export const CommunityUsersForm = ({
   title,
   description,
@@ -23,6 +32,7 @@ export const CommunityUsersForm = ({
   submitComponent,
   validateEachAddress = false,
   onClearField = () => {},
+  autoFocusOnLoad = false,
 } = {}) => {
   const canDeleteAddress = addrList.length > 1;
   return (
@@ -60,6 +70,12 @@ export const CommunityUsersForm = ({
                   isInvalid ? 'form-error-input-border' : ''
                 }`
               : 'pr-6';
+            const hasAutoFocus = determineAutoFocus(
+              addrList.length,
+              index,
+              addr,
+              autoFocusOnLoad
+            );
             return (
               <div
                 key={`index-${index}`}
@@ -74,7 +90,7 @@ export const CommunityUsersForm = ({
                   onChange={(event) =>
                     onAddressChange(index, event.target.value)
                   }
-                  autoFocus={addrList.length === index + 1 && addr === ''}
+                  autoFocus={hasAutoFocus}
                   disabled={fromServer ?? false}
                   style={{
                     width: '100%',
diff --git a/frontend/packages/client/src/components/CommunityCreate/StepTwo.js b/frontend/packages/client/src/components/CommunityCreate/StepTwo.js
index 479e2ba18..7389d1d0d 100644
--- a/frontend/packages/client/src/components/CommunityCreate/StepTwo.js
+++ b/frontend/packages/client/src/components/CommunityCreate/StepTwo.js
@@ -141,6 +141,7 @@ export default function StepTwo({
         label="Domain name or wallet address"
         validateEachAddress
         onClearField={(index) => onAdminAddressChange(index, '')}
+        autoFocusOnLoad={true}
       />
       <CommunityUsersForm
         title="Authors"
@@ -153,6 +154,7 @@ export default function StepTwo({
         label="Domain name or wallet address"
         validateEachAddress
         onClearField={(index) => onAuthorAddressChange(index, '')}
+        autoFocusOnLoad={false}
       />
       <div className="columns mb-5">
         <div className="column is-12">

From cdee910a3722c41722b9449a12b50a091db8e58e Mon Sep 17 00:00:00 2001
From: German Urrustarazu <germanurrus@gmail.com>
Date: Tue, 28 Jun 2022 15:52:46 -0300
Subject: [PATCH 2/2] use Ref for first element

---
 .../Community/CommunityEditorDetails.js       | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/frontend/packages/client/src/components/Community/CommunityEditorDetails.js b/frontend/packages/client/src/components/Community/CommunityEditorDetails.js
index 662ec5430..be8cd2388 100644
--- a/frontend/packages/client/src/components/Community/CommunityEditorDetails.js
+++ b/frontend/packages/client/src/components/Community/CommunityEditorDetails.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Bin, ValidCheckMark, InvalidCheckMark } from 'components/Svg';
 import { WrapperResponsive, Loader, AddButton } from 'components';
 import { useCommunityUsers } from 'hooks';
@@ -10,15 +10,6 @@ import useFlowAddrValidator, {
 } from './hooks/useFlowAddrValidator';
 import FadeIn from 'components/FadeIn';
 
-const determineAutoFocus = (listLength, index, addr, autoFocusOnLoad) => {
-  return (
-    // fist element of list depends on configuration (autoFocusOnLoad)
-    (listLength === 1 && addr === '' && autoFocusOnLoad) ||
-    // new elements on list will be autofocus by default
-    (listLength === index + 1 && addr === '' && index !== 0)
-  );
-};
-
 export const CommunityUsersForm = ({
   title,
   description,
@@ -35,6 +26,14 @@ export const CommunityUsersForm = ({
   autoFocusOnLoad = false,
 } = {}) => {
   const canDeleteAddress = addrList.length > 1;
+
+  const refOnFirstInput = useRef();
+
+  useEffect(() => {
+    if (refOnFirstInput.current) {
+      refOnFirstInput.current.focus();
+    }
+  }, [refOnFirstInput]);
   return (
     <div className="border-light rounded-lg columns is-flex-direction-column is-mobile m-0 p-6 mb-6 p-4-mobile mb-4-mobile">
       <div className="columns flex-1">
@@ -70,12 +69,6 @@ export const CommunityUsersForm = ({
                   isInvalid ? 'form-error-input-border' : ''
                 }`
               : 'pr-6';
-            const hasAutoFocus = determineAutoFocus(
-              addrList.length,
-              index,
-              addr,
-              autoFocusOnLoad
-            );
             return (
               <div
                 key={`index-${index}`}
@@ -90,12 +83,17 @@ export const CommunityUsersForm = ({
                   onChange={(event) =>
                     onAddressChange(index, event.target.value)
                   }
-                  autoFocus={hasAutoFocus}
+                  autoFocus={addrList.length === index + 1 && addr === ''}
                   disabled={fromServer ?? false}
                   style={{
                     width: '100%',
                     ...(isInvalid ? {} : undefined),
                   }}
+                  ref={
+                    addrList.length === 1 && addr === '' && autoFocusOnLoad
+                      ? refOnFirstInput
+                      : undefined
+                  }
                 />
                 <div
                   style={{