From 6dd2a0c78ee8885b47f2a86b98f92234b350fae2 Mon Sep 17 00:00:00 2001
From: Adam Butterworth <abutterworth@edx.org>
Date: Wed, 11 Sep 2019 12:54:17 -0400
Subject: [PATCH] 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          |  1 +
 src/profile/components/forms/Education.jsx        |  1 +
 .../components/forms/PreferredLanguage.jsx        | 15 +++++++--------
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/profile/components/forms/Country.jsx b/src/profile/components/forms/Country.jsx
index 31f914a..5b894b9 100644
--- a/src/profile/components/forms/Country.jsx
+++ b/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>
                     ))}
diff --git a/src/profile/components/forms/Education.jsx b/src/profile/components/forms/Education.jsx
index 12cbdba..3702a9e 100644
--- a/src/profile/components/forms/Education.jsx
+++ b/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(
diff --git a/src/profile/components/forms/PreferredLanguage.jsx b/src/profile/components/forms/PreferredLanguage.jsx
index f0676e8..a080026 100644
--- a/src/profile/components/forms/PreferredLanguage.jsx
+++ b/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>
                     ))}