Correctly handle clearing search input

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
 }
 

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'

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,

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>

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: