From bfaf980d4acac87df9edf45b7435f5d4ba4da021 Mon Sep 17 00:00:00 2001
From: Andre Landgraf <anla@netlight.com>
Date: Wed, 19 Jun 2019 23:56:06 +0200
Subject: [PATCH] better ux

---
 package.json          | 2 +-
 src/DataListInput.jsx | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9d11059..e4bdd7c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-datalist-input",
-  "version": "1.1.33",
+  "version": "1.1.34",
   "description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.",
   "main": "./lib/DataListInput.js",
   "license": "MIT",
diff --git a/src/DataListInput.jsx b/src/DataListInput.jsx
index baf1f61..c72b6f8 100644
--- a/src/DataListInput.jsx
+++ b/src/DataListInput.jsx
@@ -63,9 +63,15 @@ class DataListInput extends React.Component {
 
     onClickInput = () => {
         const { currentInput, visible, lastValidItem } = this.state;
-        const { requiredInputLength, dropDownLength, items, match, clearInputOnSelect } = this.props;
+        const { requiredInputLength, dropDownLength, items, match, clearInputOnSelect, initialValue } = this.props;
         const reachedRequiredLength = currentInput.length >= requiredInputLength;
 
+        // if user clicks on input field with initialValue,
+        // the user most likely wants to clear the input field
+        if ( initialValue && currentInput === initialValue ) {
+            this.setState( { currentInput: '' } );
+        }
+        
         if ( reachedRequiredLength && !visible ) {
 
             const matchingItems = items.filter( ( item ) => {