Fix Firefox: color for select options

CHANGELOG.md

@@ -12,6 +12,12 @@ way to update this template, but currently, we follow a pattern:
 
 ---
 
+## Upcoming version 2018-11-XX
+
+* [fix] Firefox showed select options with the same color as select itself. Now options have their
+  own color set and *placeholder option needs to be disabled*.
+  [#946](https://github.com/sharetribe/flex-template-web/pull/946)
+
 ## v2.2.0 2018-10-31
 
 * [add] SearchPage: adds PriceFilter (and RangeSlider, FieldRangeSlider, PriceFilterForm).

docs/customization-guide.md

@@ -140,4 +140,5 @@ See more in the [testing documentation](testing.md).
 ## Customization
 
 There are many things that you should change in the default template, and many more that you can
-change. Read [more about FTW](README.md) and check the [Customization checklist](customization-checklist.md) documentation too before publishing your site.
+change. Read [more about FTW](README.md) and check the
+[Customization checklist](customization-checklist.md) documentation too before publishing your site.

ext/default-mail-templates/README.md

@@ -14,8 +14,8 @@ A template consists of two files:
 * `TEMPLATE_NAME-subject.txt` - holds the mail Subject line template
 * `TEMPLATE_NAME-html.html` - contains the template for the HTML version of the mail
 
-Both parts are mandatory. All emails that are sent from the marketplace contain both the HTML and plain
-text variants and the recipient's mail client is free to choose which one to visualize and
+Both parts are mandatory. All emails that are sent from the marketplace contain both the HTML and
+plain text variants and the recipient's mail client is free to choose which one to visualize and
 how. The text version is automatically generated from the HTML template.
 
 ## Template syntax

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}

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 {

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}

src/forms/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap

@@ -68,6 +68,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
       value=""
     >
       <option
+        disabled={true}
         value=""
       >
         EditListingDescriptionForm.categoryPlaceholder

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}` })}