Fix error field being shown before entering any name (#522)

* fix test and bug

* use useIsMounted hook

Co-authored-by: Github Actions <action@github.com>

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx

@@ -85,6 +85,7 @@ describe('Create Account', () => {
       check(wrapper.find('input[type="checkbox"]'));
       wrapper.find('button').simulate('click');
       await act(flushAllPromises);
+      wrapper.update();
     });
 
     it('only account name input is visible at first', () => {

packages/extension-ui/src/components/ValidatedInput.tsx

@@ -6,6 +6,7 @@ import { ThemeProps } from '../types';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
+import useIsMounted from '../hooks/useIsMounted';
 import { Result, Validator } from '../util/validators';
 
 interface BasicProps {
@@ -24,12 +25,13 @@ type Props<T extends BasicProps> = T & {
 
 function ValidatedInput<T extends Record<string, unknown>> ({ className, component: Input, defaultValue, onValidatedChange, validator, ...props }: Props<T>): React.ReactElement<Props<T>> {
   const [value, setValue] = useState(defaultValue || '');
-  const [wasMounted, setWasMounted] = useState(false);
   const [validationResult, setValidationResult] = useState<Result<string>>(Result.ok(''));
+  const isMounted = useIsMounted();
 
   useEffect(() => {
-    if (!wasMounted) {
-      setWasMounted(true);
+    // Do not show any error on first mount
+    if (!isMounted) {
+      return;
     }
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises

packages/extension-ui/src/hooks/useIsMounted.ts

@@ -0,0 +1,18 @@
+// Copyright 2019-2020 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef } from 'react';
+
+export default function useIsMounted (): boolean {
+  const isMounted = useRef(false);
+
+  useEffect((): () => void => {
+    isMounted.current = true;
+
+    return (): void => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return isMounted.current;
+}