From 3c99a88708f5300a0e805383a4d905b88ed4195d Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 5 Nov 2018 11:31:13 +0200
Subject: [PATCH] Fix Firefox: category options were grey

---
 src/components/FieldBirthdayInput/FieldBirthdayInput.js    | 6 +++---
 src/components/FieldSelect/FieldSelect.css                 | 7 +++++++
 .../CustomCategorySelectFieldMaybe.js                      | 4 +++-
 .../__snapshots__/EditListingDescriptionForm.test.js.snap  | 1 +
 src/forms/PayoutDetailsForm/PayoutDetailsForm.js           | 4 +++-
 5 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/FieldBirthdayInput/FieldBirthdayInput.js b/src/components/FieldBirthdayInput/FieldBirthdayInput.js
index aa0709a4..fe90df08 100644
--- a/src/components/FieldBirthdayInput/FieldBirthdayInput.js
+++ b/src/components/FieldBirthdayInput/FieldBirthdayInput.js
@@ -155,7 +155,7 @@ class BirthdayInputComponent extends Component {
             onBlur={() => this.handleSelectBlur()}
             onChange={e => this.handleSelectChange('day', e.target.value)}
           >
-            <option>{datePlaceholder}</option>
+            <option disabled>{datePlaceholder}</option>
             {days.map(d => (
               <option key={d} value={d}>
                 {pad(d)}
@@ -176,7 +176,7 @@ class BirthdayInputComponent extends Component {
             onBlur={() => this.handleSelectBlur()}
             onChange={e => this.handleSelectChange('month', e.target.value)}
           >
-            <option>{monthPlaceholder}</option>
+            <option disabled>{monthPlaceholder}</option>
             {months.map(m => (
               <option key={m} value={m}>
                 {pad(m)}
@@ -197,7 +197,7 @@ class BirthdayInputComponent extends Component {
             onBlur={() => this.handleSelectBlur()}
             onChange={e => this.handleSelectChange('year', e.target.value)}
           >
-            <option>{yearPlaceholder}</option>
+            <option disabled>{yearPlaceholder}</option>
             {years.map(y => (
               <option key={y} value={y}>
                 {y}
diff --git a/src/components/FieldSelect/FieldSelect.css b/src/components/FieldSelect/FieldSelect.css
index 0aa58c74..1cba1eba 100644
--- a/src/components/FieldSelect/FieldSelect.css
+++ b/src/components/FieldSelect/FieldSelect.css
@@ -6,6 +6,13 @@
 .select {
   color: var(--matterColorAnti);
   border-bottom-color: var(--attentionColor);
+
+  & > option {
+    color: var(--matterColor);
+  }
+  & > option:disabled {
+    color: var(--matterColorAnti);
+  }
 }
 
 .selectSuccess {
diff --git a/src/forms/EditListingDescriptionForm/CustomCategorySelectFieldMaybe.js b/src/forms/EditListingDescriptionForm/CustomCategorySelectFieldMaybe.js
index ea9649c9..97b03b5c 100644
--- a/src/forms/EditListingDescriptionForm/CustomCategorySelectFieldMaybe.js
+++ b/src/forms/EditListingDescriptionForm/CustomCategorySelectFieldMaybe.js
@@ -25,7 +25,9 @@ const CustomCategorySelectFieldMaybe = props => {
       label={categoryLabel}
       validate={categoryRequired}
     >
-      <option value="">{categoryPlaceholder}</option>
+      <option disabled value="">
+        {categoryPlaceholder}
+      </option>
       {categories.map(c => (
         <option key={c.key} value={c.key}>
           {c.label}
diff --git a/src/forms/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap b/src/forms/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
index 3a9cfab8..2754b161 100644
--- a/src/forms/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
+++ b/src/forms/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
@@ -68,6 +68,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
       value=""
     >
       <option
+        disabled={true}
         value=""
       >
         EditListingDescriptionForm.categoryPlaceholder
diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
index 41544692..d379172e 100644
--- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
+++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js
@@ -236,7 +236,9 @@ const PayoutDetailsFormComponent = props => (
               label={countryLabel}
               validate={countryRequired}
             >
-              <option value="">{countryPlaceholder}</option>
+              <option disabled value="">
+                {countryPlaceholder}
+              </option>
               {supportedCountries.map(c => (
                 <option key={c} value={c}>
                   {intl.formatMessage({ id: `PayoutDetailsForm.countryNames.${c}` })}