Simplify rules for whether listbox is expanded

examples/geo/App.jsx

@@ -47,25 +47,25 @@ const defaultItemGroups = [
 const App = () => {
   const onChange = useCallback(
     (text) => {
-      console.log('Changed to:', text)
+      //console.log('Changed to:', text)
     }, []
   )
 
   const onSelect = useCallback(
     (selectedResult) => {
-      console.log('Selected Result:', selectedResult)
+      //console.log('Selected Result:', selectedResult)
     }, []
   )
 
   const onEnter = useCallback(
     (query, selectedResult) => {
-      console.log('Enter Pressed. Selected Result:', selectedResult, query)
+      //console.log('Enter Pressed. Selected Result:', selectedResult, query)
     }, []
   )
 
   const onTab = useCallback(
     (query, selectedResult) => {
-      console.log('Tab Pressed. Selected Result:', selectedResult, query)
+      //console.log('Tab Pressed. Selected Result:', selectedResult, query)
     }, []
   )
 

src/lib/components/container.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useContext } from 'react'
+import React, { useState, useRef, useContext } from 'react'
 import { StateContext } from '../context/state'
 import ListBox from './listBox'
 import { useDebounce } from 'use-debounce'
@@ -115,7 +115,6 @@ export default function Container(props) {
   useSelected(state.selected, queryInput, typeaheadInput, onSelect)
 
   const onTabOrEnter = (keyPressed) => {
-    // keyPressed must be 'enter' or 'tab'
     const highlightedIndex = state.highlighted && state.highlighted.index
     const highlightedItem = !isUndefined(highlightedIndex)
       ? state.items[highlightedIndex]
@@ -129,11 +128,9 @@ export default function Container(props) {
     return clearButton && !!state.query
   }
 
-  const isExpanded = useMemo(() => {
-    if (hasFocus && !state.query && defaultItemGroups) return true
-    if (state.query.length < minQueryLength) return false
-    return hasFocus && !!state.query
-  }, [hasFocus, state.query, defaultItemGroups, minQueryLength])
+  const isExpanded = () => {
+    return hasFocus && state.itemsLoaded
+  }
 
   // Handle different keypresses and call the appropriate action creators
   const checkKey = (evt) => {
@@ -243,7 +240,7 @@ export default function Container(props) {
             aria-label={clearButtonAriaLabel}>{clearButtonText}</div>
         )}
 
-        {isExpanded && (
+        {isExpanded() && (
           <ListBox
             id={listBoxId}
             items={state.items}

src/lib/components/hooks/useData.js

@@ -9,8 +9,6 @@ const filterSuppliedData = (group, query) => {
     ? dataSearchType.toLowerCase()
     : dataSearchType
 
-  if(!query.length) return []
-
   switch (searchType) {
     case 'startswith':
       return data.filter((item) =>

src/lib/context/state.jsx

@@ -11,6 +11,7 @@ const StateContextProvider = (props) => {
   const [state, dispatch] = useReducer(reducer, {
     query: text,
     items,
+    itemsLoaded: false,
     highlighted: undef,
     selected: undef,
     customStyles: styles,

src/lib/reducers/reducer.js

@@ -9,8 +9,17 @@ const reducer = (state, action) => {
   const newState = (() => {
     switch (action.type) {
       case types.SET_QUERY:
+        // Disallow listbox until user has entered a long enough query
+        if(action.payload.query.length < state.props.minQueryLength)
+          action.payload.itemsLoaded = false
+
+        // Allow listbox if there is no query and we have default items to show
+        if(action.payload.query.length === 0 && state.props.defaultItemGroups)
+          action.payload.itemsLoaded = true
         return action.payload
       case types.SET_ITEMS:
+        if(action.payload.items.length)
+          action.payload.itemsLoaded = true
         return action.payload
       case types.SET_HIGHLIGHTED:
         return { highlighted: highlightedItem(action.index, state) }