Created option to simulate no selection of EuiSelect

CHANGELOG.md

@@ -3,8 +3,9 @@
 - Added `EuiDelayHide` component. [#412](https://github.com/elastic/eui/pull/412)
 - Decreased overall size of checkbox, radio, and switches as well as better styles for the different states. ([#407](https://github.com/elastic/eui/pull/407))
 - `EuiFilePicker` added for `input type="file"` needs. ([#402](https://github.com/elastic/eui/pull/402))
--  Add `isLoading` prop to `EuiButton` ([#427](https://github.com/elastic/eui/pull/427))
--  Added icons: `eye`, `eyeClosed`, `grab`, `heatmap`, `vector` ([#427](https://github.com/elastic/eui/pull/427))
+- Add `isLoading` prop to `EuiButton` ([#427](https://github.com/elastic/eui/pull/427))
+- Added icons: `eye`, `eyeClosed`, `grab`, `heatmap`, `vector` ([#427](https://github.com/elastic/eui/pull/427))
+- Added `hasNoInitialSelection` option to `EuiSelect`. ([#422](https://github.com/elastic/eui/pull/422))
 
 **Bug fixes**
 

src-docs/src/views/form/form_rows.js

@@ -126,9 +126,10 @@ export default class extends Component {
         </EuiFormRow>
 
         <EuiFormRow
-          label="Select"
+          label="Select (with no initial selection)"
         >
           <EuiSelect
+            hasNoInitialSelection={true}
             options={[
               { value: 'option_one', text: 'Option one' },
               { value: 'option_two', text: 'Option two' },

src/components/form/select/select.js

@@ -19,6 +19,7 @@ export const EuiSelect = ({
   isInvalid,
   fullWidth,
   isLoading,
+  hasNoInitialSelection,
   ...rest
 }) => {
   const classes = classNames(
@@ -30,6 +31,13 @@ export const EuiSelect = ({
     className
   );
 
+  let emtpyOptionNode;
+  if (hasNoInitialSelection) {
+    emtpyOptionNode = (
+      <option selected disabled hidden style={{ display: 'none' }}>&nbsp;</option>
+    );
+  }
+
   return (
     <EuiFormControlLayout
       icon="arrowDown"
@@ -45,6 +53,7 @@ export const EuiSelect = ({
           ref={inputRef}
           {...rest}
         >
+          {emtpyOptionNode}
           {options.map((option, index) => {
             const {
               text,
@@ -67,11 +76,17 @@ EuiSelect.propTypes = {
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,
+
+  /**
+   * Simulates no selection by creating an empty, selected, hidden first option
+   */
+  hasNoInitialSelection: PropTypes.bool,
   inputRef: PropTypes.func,
 };
 
 EuiSelect.defaultProps = {
   options: [],
   fullWidth: false,
   isLoading: false,
+  hasNoInitialSelection: false,
 };