From 63ac90c603feca3f2df937b8b5b77f42abe4180f Mon Sep 17 00:00:00 2001
From: Sag <guptazy@gmail.com>
Date: Wed, 27 Sep 2023 18:25:44 +0200
Subject: [PATCH] Moved autoFocus to the title, when adding a recommendation
 (#18384)

no issue
---
 .../src/admin-x-ds/global/form/TextArea.tsx           | 11 +----------
 .../site/recommendations/RecommendationReasonForm.tsx |  6 ++----
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/apps/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx b/apps/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx
index ec7e5f9135..8dac3f38b0 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useId} from 'react';
+import React, {useId} from 'react';
 
 import Heading from '../Heading';
 import Hint from '../Hint';
@@ -22,7 +22,6 @@ interface TextAreaProps {
     fontStyle?: FontStyles;
     className?: string;
     onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    autoFocus?: boolean;
 }
 
 const TextArea: React.FC<TextAreaProps> = ({
@@ -52,14 +51,6 @@ const TextArea: React.FC<TextAreaProps> = ({
         setFocusState(false);
     };
 
-    useEffect(() => {
-        if (props.autoFocus && inputRef && inputRef.current) {
-            const textarea = inputRef.current;
-            textarea.focus();
-            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
-        }
-    }, [props.autoFocus, inputRef]);
-
     let styles = clsx(
         'peer order-2 rounded-sm border px-3 py-2 dark:text-white',
         clearBg ? 'bg-transparent' : 'bg-grey-75 dark:bg-grey-950',
diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
index 41818a1b3e..815960c425 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
@@ -1,7 +1,7 @@
 import Form from '../../../../admin-x-ds/global/form/Form';
 import Heading from '../../../../admin-x-ds/global/Heading';
 import Hint from '../../../../admin-x-ds/global/Hint';
-import React, {useRef} from 'react';
+import React from 'react';
 import RecommendationIcon from './RecommendationIcon';
 import TextArea from '../../../../admin-x-ds/global/form/TextArea';
 import TextField from '../../../../admin-x-ds/global/form/TextField';
@@ -20,7 +20,6 @@ interface Props<T extends EditOrAddRecommendation> {
 const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recommendation>> = ({showURL, formState, updateForm, errors, clearError}) => {
     const [reasonLength, setReasonLength] = React.useState(formState?.reason?.length || 0);
     const reasonLengthColor = reasonLength > 200 ? 'text-red' : 'text-green';
-    const focusRef = useRef<HTMLTextAreaElement>(null);
     return <Form
         marginBottom={false}
         marginTop
@@ -53,6 +52,7 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
         />}
 
         <TextField
+            autoFocus={true}
             error={Boolean(errors.title)}
             hint={errors.title}
             title="Title"
@@ -63,11 +63,9 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
             }}
         />
         <TextArea
-            autoFocus={true}
             clearBg={true}
             error={Boolean(errors.reason)}
             hint={errors.reason || <>Max. <strong>200</strong> characters. You&apos;ve used <strong className={reasonLengthColor}>{reasonLength}</strong></>}
-            inputRef={focusRef}
             rows={3}
             title="Short description"
             value={formState.reason ?? ''}