[DDW-619] Async selector

source/renderer/app/components/wallet/WalletCreateDialog.js

@@ -191,8 +191,8 @@ export default class WalletCreateDialog extends Component<Props, State> {
         };
         this.props.onSubmit(walletData);
       },
-      onError: form => {
-        handleFormErrors(form);
+      onError: () => {
+        handleFormErrors('.SimpleFormField_error');
         this.setState({ isSubmitting: false });
       },
     });

source/renderer/app/components/wallet/WalletRestoreDialog.js

@@ -176,6 +176,12 @@ export default class WalletRestoreDialog extends Component<Props, State> {
 
   recoveryPhraseAutocomplete: Autocomplete;
 
+  componentWillReceiveProps(newProps: Props) {
+    if (!this.props.error && newProps.error) {
+      handleFormErrors('.WalletRestoreDialog_error');
+    }
+  }
+
   form = new ReactToolboxMobxForm(
     {
       fields: {
@@ -296,7 +302,7 @@ export default class WalletRestoreDialog extends Component<Props, State> {
 
         onSubmit(walletData);
       },
-      onError: handleFormErrors,
+      onError: handleFormErrors.bind(this, '.SimpleFormField_error'),
     });
   };
 

source/renderer/app/utils/ReactToolboxMobxForm.js

@@ -1,5 +1,6 @@
 // @flow
 import MobxReactForm from 'mobx-react-form';
+import { waitForExist } from './waitForExist';
 
 export default class ReactToolboxMobxForm extends MobxReactForm {
   bindings() {
@@ -21,7 +22,14 @@ export default class ReactToolboxMobxForm extends MobxReactForm {
   }
 }
 
-export const handleFormErrors = () => {
-  const firstErrorLabel = document.querySelector('.SimpleFormField_error');
-  if (firstErrorLabel) firstErrorLabel.scrollIntoView({ behavior: 'smooth' });
+export const handleFormErrors = async (querySelector: string) => {
+  try {
+    const firstErrorLabel = await waitForExist(querySelector);
+    firstErrorLabel.scrollIntoView({ behavior: 'smooth' });
+    if (firstErrorLabel.nextSibling && firstErrorLabel.nextSibling.click) {
+      setTimeout(() => firstErrorLabel.nextSibling.click(), 500);
+    }
+  } catch (err) {
+    throw err;
+  }
 };

source/renderer/app/utils/waitForExist.js

@@ -0,0 +1,50 @@
+// @flow
+
+type Options = {
+  rejectTimeoutTime?: number,
+  checkIntervalTime?: number,
+  context?: HTMLElement,
+  selectAll?: boolean,
+};
+
+const REJECT_TIMEOUT = 10000;
+const CHECK_INTERVAL = 500;
+
+export const waitForExist = (
+  selector: string,
+  options?: Options = {}
+): Promise<any> => {
+  const {
+    rejectTimeoutTime = REJECT_TIMEOUT,
+    checkIntervalTime = CHECK_INTERVAL,
+    context = document,
+    selectAll,
+  } = options;
+  return new Promise((resolve, reject) => {
+    const rejectTimeout = setTimeout(() => {
+      clearInterval(checkInterval);
+      reject(new Error('Element(s) not found'));
+    }, rejectTimeoutTime);
+
+    const doResolve = selection => {
+      resolve(selection);
+      clearInterval(checkInterval);
+      clearTimeout(rejectTimeout);
+    };
+
+    const checkAll = () => {
+      const selection = context.querySelectorAll(selector);
+      if (selection.length) doResolve(selection);
+    };
+
+    const checkSingle = () => {
+      const selection = context.querySelector(selector);
+      if (selection) doResolve(selection);
+    };
+
+    const check = selectAll ? checkAll : checkSingle;
+
+    const checkInterval = setInterval(check, checkIntervalTime);
+    check();
+  });
+};