From 2a4d74b7c966035593f526f490884f655a9324e3 Mon Sep 17 00:00:00 2001
From: cvanem <chris@greenlinkservices.com>
Date: Sun, 17 Feb 2019 08:24:16 -0700
Subject: [PATCH] Add custom adornment example and include input handlers in
 getInputProps

---
 src/Input.js     |  2 +-
 stories/basic.js | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/Input.js b/src/Input.js
index 684e00c..dba09c9 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -36,7 +36,7 @@ class Input extends Component {
   render() {
     const { inputRef, getInputProps, loading, downshiftProps } = this.props;
     const { label, labelProps, disabled, required, error, helperText, ...inputProps } = getInputProps
-      ? getInputProps(downshiftProps)
+      ? getInputProps({...downshiftProps, inputRef: this.input, handleClearSelection: this.handleClearSelection, handleToggleMenu: this.handleToggleMenu})
       : {};
 
     return (
diff --git a/stories/basic.js b/stories/basic.js
index 3a55df4..02eb7de 100644
--- a/stories/basic.js
+++ b/stories/basic.js
@@ -2,8 +2,13 @@ import React, { Component } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
 import Avatar from '@material-ui/core/Avatar';
+import Clear from '@material-ui/icons/Clear';
 import Drawer from '@material-ui/core/Drawer';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -24,6 +29,26 @@ storiesOf('Basic', module)
   .add('items only', () => <StarWarsSelect />)
   .add('disabled', () => <StarWarsSelect getInputProps={() => ({ disabled: true })} />)
   .add('without adornments', () => <StarWarsSelect getInputProps={() => ({ endAdornment: null })} />)
+  .add('with custom adornments', () => (
+    <StarWarsSelect
+      getInputProps={({ isOpen, selectedItem, handleToggleMenu, handleClearSelection }) => ({
+        endAdornment: (
+          <InputAdornment position="end">
+            {isOpen ? (
+              <ArrowDropUp color="default" onClick={handleToggleMenu} />
+            ) : (
+              <ArrowDropDown color="default" onClick={handleToggleMenu} />
+            )}
+            {!!selectedItem && (
+              <IconButton color="default" onClick={handleClearSelection} aria-label="Clear selection">
+                <Clear />
+              </IconButton>
+            )}
+          </InputAdornment>
+        ),
+      })}
+    />
+  ))
   .add('loading', () => <StarWarsSelect loading />)
   .add('helperText', () => (
     <StarWarsSelect