From 1deef5457671fa5e1bb571fccbe3993bb796c159 Mon Sep 17 00:00:00 2001
From: Tom Southall <tsouthall@gmail.com>
Date: Thu, 24 Feb 2022 14:22:44 +0000
Subject: [PATCH] Correctly handle clearing search input

---
 examples/geo/components/splitMatch/splitMatch.jsx |  4 ----
 src/lib/actions/actionTypes.js                    |  1 +
 src/lib/actions/actions.js                        |  7 +++++++
 src/lib/components/container.jsx                  | 12 ++++++++----
 src/lib/reducers/reducer.js                       |  9 +++++++++
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/examples/geo/components/splitMatch/splitMatch.jsx b/examples/geo/components/splitMatch/splitMatch.jsx
index e0946d7..454b8ac 100644
--- a/examples/geo/components/splitMatch/splitMatch.jsx
+++ b/examples/geo/components/splitMatch/splitMatch.jsx
@@ -67,8 +67,6 @@ export default function SplitMatch(props) {
     const addTag = (isMatch, finalTagInDivider) => {
       const key = `part-${i}-${parts.length}`
       if(tag.length && tagIsMatch !== isMatch) {
-        console.log({tag : `"${tag}"`})
-
         if(!includeSeparator && finalTagInDivider && (globalSplit || !separatorRemoved)) {
           tag = tag.replace(separator, '')
           separatorRemoved = true
@@ -94,8 +92,6 @@ export default function SplitMatch(props) {
     return wrapSplit(parts, `part-${i}`, i)
   })
 
-  console.log({parts})
-
   return parts
 }
 
diff --git a/src/lib/actions/actionTypes.js b/src/lib/actions/actionTypes.js
index 9246062..7c24a7e 100644
--- a/src/lib/actions/actionTypes.js
+++ b/src/lib/actions/actionTypes.js
@@ -1,5 +1,6 @@
 export const SET_QUERY = 'SET_QUERY'
 export const SET_ITEMS = 'SET_ITEMS'
+export const CLEAR = 'CLEAR'
 export const SET_HIGHLIGHTED = 'SET_HIGHLIGHTED'
 export const CLEAR_HIGHLIGHTED = 'CLEAR_HIGHLIGHTED'
 export const NEXT_HIGHLIGHTED = 'NEXT_HIGHLIGHTED'
diff --git a/src/lib/actions/actions.js b/src/lib/actions/actions.js
index ce7a4bd..d88e8b1 100644
--- a/src/lib/actions/actions.js
+++ b/src/lib/actions/actions.js
@@ -14,6 +14,13 @@ export const setItems = (items) => {
   }
 }
 
+export const clear = () => {
+  console.log('clear() called')
+  return {
+    type: types.CLEAR
+  }
+}
+
 export const setHighlighted = (index) => {
   return {
     type: types.SET_HIGHLIGHTED,
diff --git a/src/lib/components/container.jsx b/src/lib/components/container.jsx
index a96e6db..3c6a603 100644
--- a/src/lib/components/container.jsx
+++ b/src/lib/components/container.jsx
@@ -18,7 +18,8 @@ import {
   setHighlighted,
   highlightPrev,
   highlightNext,
-  setSelected
+  setSelected,
+  clear
 } from '../actions/actions'
 
 export default function Container(props) {
@@ -157,13 +158,16 @@ export default function Container(props) {
   }
 
   const clearState = () => {
-    dispatch(setQuery(''))
+    // Immediately clearing both inputs prevents any slight
+    // visual timing delays with async dispatch
+    queryInput.current.vaslue = ''
+    typeaheadInput.current.value = ''
+    dispatch(clear())
     queryInput.current.focus()
   }
 
   const handleFocus = () => {
     setHasFocus(true) //TODO: make hasFocus part of global state?
-
     if (state.items && state.items.length > 0) {
       dispatch(setHighlighted(0))
     }
@@ -223,7 +227,7 @@ export default function Container(props) {
           <div
             className={customStyles.clearButton}
             style={defaultStyles.clearButton}
-            onMouseDown={handleClearButton}
+            onClick={handleClearButton}
             tabIndex={-1}
             role='button'
             aria-label={clearButtonAriaLabel}>{clearButtonText}</div>
diff --git a/src/lib/reducers/reducer.js b/src/lib/reducers/reducer.js
index 62af317..0ddaa18 100644
--- a/src/lib/reducers/reducer.js
+++ b/src/lib/reducers/reducer.js
@@ -2,6 +2,7 @@ import * as types from '../actions/actionTypes'
 import undef from '../utils/undef'
 
 const highlightedItem = (index, items) => {
+  if(!items[index]) return undef
   return { index, text: items[index].text }
 }
 
@@ -35,6 +36,14 @@ const reducer = (state, action) => {
         if(action.items.length) newState.itemsLoaded = true
 
         return newState
+      case types.CLEAR:
+        return {
+          query: '',
+          items: [],
+          itemsLoaded: false,
+          highlighted: undef,
+          selected: undef
+        }
       case types.SET_HIGHLIGHTED:
         return { highlighted: highlightedItem(action.index, state.items) }
       case types.CLEAR_HIGHLIGHTED: