fix: add empty options to dropdowns (#246)

ARCH-1165: Add an empty option so that users can delete values they set for education, spoken language, and country of origin

src/profile/components/forms/Country.jsx

@@ -83,6 +83,7 @@ class Country extends React.Component {
                     value={country}
                     onChange={this.handleChange}
                   >
+                    <option value="" />
                     {sortedCountries.map(({ code, name }) => (
                       <option key={code} value={code}>{name}</option>
                     ))}

src/profile/components/forms/Education.jsx

@@ -78,6 +78,7 @@ class Education extends React.Component {
                     value={levelOfEducation}
                     onChange={this.handleChange}
                   >
+                    <option value="" />
                     {EDUCATION_LEVELS.map(level => (
                       <option key={level} value={level}>
                         {intl.formatMessage(get(

src/profile/components/forms/PreferredLanguage.jsx

@@ -26,19 +26,17 @@ class PreferredLanguage extends React.Component {
   }
 
   handleChange(e) {
-    const {
-      name,
-      value: rawValue,
-    } = e.target;
-    let value = rawValue;
+    const { name, value } = e.target;
     // Restructure the data.
     // We deconstruct our value prop in render() so this
     // changes our data's shape back to match what came in
     if (name === this.props.formId) {
-      value = [{ code: rawValue }];
+      if (value !== '') {
+        this.props.changeHandler(name, [{ code: value }]);
+      } else {
+        this.props.changeHandler(name, []);
+      }
     }
-
-    this.props.changeHandler(name, value);
   }
 
   handleSubmit(e) {
@@ -92,6 +90,7 @@ class PreferredLanguage extends React.Component {
                     value={value}
                     onChange={this.handleChange}
                   >
+                    <option value="" />
                     {sortedLanguages.map(({ code, name }) => (
                       <option key={code} value={code}>{name}</option>
                     ))}