diff --git a/examples/geo/App.jsx b/examples/geo/App.jsx index 586d6f9..262da21 100644 --- a/examples/geo/App.jsx +++ b/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) }, [] ) diff --git a/src/lib/components/container.jsx b/src/lib/components/container.jsx index bfa772d..e1f01c6 100644 --- a/src/lib/components/container.jsx +++ b/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} )} - {isExpanded && ( + {isExpanded() && ( { ? dataSearchType.toLowerCase() : dataSearchType - if(!query.length) return [] - switch (searchType) { case 'startswith': return data.filter((item) => diff --git a/src/lib/context/state.jsx b/src/lib/context/state.jsx index 3c8bf4a..da6c3d8 100644 --- a/src/lib/context/state.jsx +++ b/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, diff --git a/src/lib/reducers/reducer.js b/src/lib/reducers/reducer.js index c10f5eb..ace1e44 100644 --- a/src/lib/reducers/reducer.js +++ b/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) }