feat(select): Add an unselectable placeholder

src/components/Select/Select.jsx

@@ -14,14 +14,19 @@ import formFieldStyles from '../FormFields.modules.scss'
 import positionStyles from '../Position.modules.scss'
 import iconWrapperStyles from '../Icons/IconWrapper.modules.scss'
 
-const Select = ({ options, ...props }) => (
+const Select = ({ options, placeholder, ...props }) => (
   <FormField {...props}>
     {({ className, ...selectProps }, showIcon, feedback) => (
       <div className={positionStyles.relative}>
         <select
           {...selectProps}
           className={joinClassNames(className, styles.select, formFieldStyles.height)}
         >
+          {placeholder && (
+            <option value="" hidden disabled>
+              {placeholder}
+            </option>
+          )}
           {options.map(({ text, value }) => (
             <option key={value} value={value}>
               {text}
@@ -43,7 +48,7 @@ const Select = ({ options, ...props }) => (
 
 Select.propTypes = {
   /**
-   * The selectable options
+   * The selectable options.
    */
   options: PropTypes.arrayOf(
     PropTypes.shape({
@@ -59,6 +64,10 @@ Select.propTypes = {
    * Clarify the expected input.
    */
   hint: PropTypes.string,
+  /**
+   * Show a un-selectable initial option.
+   */
+  placeholder: PropTypes.string,
   /**
    * The value.
    */
@@ -108,6 +117,7 @@ Select.propTypes = {
 
 Select.defaultProps = {
   hint: undefined,
+  placeholder: undefined,
   value: '',
   feedback: undefined,
   error: undefined,

src/components/Select/__tests__/Select.spec.jsx

@@ -233,6 +233,16 @@ describe('Select', () => {
     expect(findSelectElement()).toBeDisabled()
   })
 
+  it('can have an un-selectable placeholder', () => {
+    const { findSelectElement } = doMount({ placeholder: 'Please select...' })
+
+    expect(findSelectElement()).toContainReact(
+      <option value="" disabled hidden>
+        Please select...
+      </option>
+    )
+  })
+
   it('can have an error message', () => {
     const { select } = doMount({ id: 'some-id', error: 'Oh no a terrible error!' })
 
@@ -336,10 +346,10 @@ describe('Select', () => {
   })
 
   it('passes additional attributes to the select element', () => {
-    const { findSelectElement } = doMount({ name: 'a name', placeholder: 'a placeholder' })
+    const { findSelectElement } = doMount({ name: 'a name', id: 'the-id' })
 
     expect(findSelectElement()).toHaveProp('name', 'a name')
-    expect(findSelectElement()).toHaveProp('placeholder', 'a placeholder')
+    expect(findSelectElement()).toHaveProp('id', 'the-id')
   })
 
   it('does not allow custom CSS', () => {