From 628e00f4016725b3b3b8fba32d4231e33de6fde8 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 16 Sep 2019 22:34:32 -0400
Subject: [PATCH] when select dropdown is focused, clear any validation errors

---
 src/components/join-flow/birthdate-step.jsx | 9 ++++++++-
 src/components/join-flow/country-step.jsx   | 6 +++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx
index e22c7f22c..b4a726862 100644
--- a/src/components/join-flow/birthdate-step.jsx
+++ b/src/components/join-flow/birthdate-step.jsx
@@ -84,7 +84,8 @@ class BirthDateStep extends React.Component {
                     const {
                         errors,
                         handleSubmit,
-                        isSubmitting
+                        isSubmitting,
+                        setFieldError
                     } = props;
                     return (
                         <JoinFlowStep
@@ -118,6 +119,9 @@ class BirthDateStep extends React.Component {
                                         'validation-birthdate-month',
                                         'validation-left'
                                     )}
+                                    /* eslint-disable react/jsx-no-bind */
+                                    onFocus={() => setFieldError('birth_month', null)}
+                                    /* eslint-enable react/jsx-no-bind */
                                 />
                                 <FormikSelect
                                     className={classNames(
@@ -131,6 +135,9 @@ class BirthDateStep extends React.Component {
                                     options={birthYearOptions}
                                     validate={this.validateSelect}
                                     validationClassName="validation-birthdate-year"
+                                    /* eslint-disable react/jsx-no-bind */
+                                    onFocus={() => setFieldError('birth_year', null)}
+                                    /* eslint-enable react/jsx-no-bind */
                                 />
                             </div>
                             <div className="join-flow-privacy-message">
diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx
index fbe53a7c4..ee9854250 100644
--- a/src/components/join-flow/country-step.jsx
+++ b/src/components/join-flow/country-step.jsx
@@ -64,7 +64,8 @@ class CountryStep extends React.Component {
                     const {
                         errors,
                         handleSubmit,
-                        isSubmitting
+                        isSubmitting,
+                        setFieldError
                     } = props;
                     return (
                         <JoinFlowStep
@@ -93,6 +94,9 @@ class CountryStep extends React.Component {
                                     options={this.countryOptions}
                                     validate={this.validateSelect}
                                     validationClassName="validation-full-width-input"
+                                    /* eslint-disable react/jsx-no-bind */
+                                    onFocus={() => setFieldError('country', null)}
+                                    /* eslint-enable react/jsx-no-bind */
                                 />
                                 {/* note that this is a hidden checkbox the user will never see */}
                                 <FormikCheckbox