From 38cfc549f2f3dbae0ff76c8c2768e3d800be6245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 28 Jun 2022 07:54:31 +0100
Subject: [PATCH] fix: copy feature double validation popup (#1117)

* fix: copy feature double validation popup

* fix: add aria-required, validate on submit

* refactor: rename variable to be more consistent with codebase
---
 .../feature/CopyFeature/CopyFeature.tsx       | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
index 22cf879ff4..a590dce438 100644
--- a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
+++ b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
@@ -1,10 +1,4 @@
-import {
-    useState,
-    useRef,
-    useEffect,
-    FormEventHandler,
-    ChangeEventHandler,
-} from 'react';
+import { useState, FormEventHandler, ChangeEventHandler } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import {
     Button,
@@ -31,16 +25,11 @@ export const CopyFeatureToggle = () => {
     const [nameError, setNameError] = useState<string | undefined>();
     const [newToggleName, setNewToggleName] = useState<string>();
     const { cloneFeatureToggle, validateFeatureToggleName } = useFeatureApi();
-    const inputRef = useRef<HTMLInputElement>();
     const featureId = useRequiredPathParam('featureId');
     const projectId = useRequiredPathParam('projectId');
     const { feature } = useFeature(projectId, featureId);
     const navigate = useNavigate();
 
-    useEffect(() => {
-        inputRef.current?.focus();
-    }, []);
-
     const setValue: ChangeEventHandler<HTMLInputElement> = event => {
         const value = trim(event.target.value);
         setNewToggleName(value);
@@ -53,17 +42,20 @@ export const CopyFeatureToggle = () => {
     const onValidateName = async () => {
         try {
             await validateFeatureToggleName(newToggleName);
-
             setNameError(undefined);
+            return true;
         } catch (error) {
             setNameError(formatUnknownError(error));
         }
+        return false;
     };
 
     const onSubmit: FormEventHandler = async event => {
         event.preventDefault();
 
-        if (nameError) {
+        const isValidName = await onValidateName();
+
+        if (!isValidName) {
             return;
         }
 
@@ -113,8 +105,8 @@ export const CopyFeatureToggle = () => {
                         helperText={nameError}
                         variant="outlined"
                         size="small"
-                        inputRef={inputRef}
-                        required
+                        aria-required
+                        autoFocus
                     />
                     <FormControlLabel
                         control={