Allow turning off typeahead via a prop

examples/geo/App.jsx

@@ -83,6 +83,7 @@ const App = () => {
             placeholder={placeholder}
             plugins={[[recentSearchesPlugin, {ratio: 2, name: 'Recent'}]]}
             styles={autocompleteStyles}
+            typeahead={false}
             Cancel={CancelButton}
             Clear={ClearButton}
             GroupName={GroupName}

src/lib/components/container.jsx

@@ -51,6 +51,7 @@ export default function Container(props) {
     onTab,
     placeholder,
     tabIndex,
+    typeahead,
     Cancel,
     Clear
   } = props
@@ -180,7 +181,7 @@ export default function Container(props) {
     // Immediately clearing both inputs prevents any slight
     // visual timing delays with async dispatch
     queryInput.current.value = ''
-    typeaheadInput.current.value = ''
+    if(typeahead) typeaheadInput.current.value = ''
     dispatch(clear())
     queryInput.current.focus()
   }
@@ -237,20 +238,22 @@ export default function Container(props) {
           aria-controls={listboxId}
         />
 
-        <input
-          className={customStyles.typeahead}
-          style={defaultStyles.typeahead}
-          disabled={disabled}
-          type='text'
-          autoComplete='off'
-          autoCorrect='off'
-          autoCapitalize='off'
-          spellCheck='false'
-          tabIndex='-1'
-          readOnly='readonly'
-          aria-hidden='true'
-          ref={typeaheadInput}
-        />
+        {typeahead && (
+          <input
+            className={customStyles.typeahead}
+            style={defaultStyles.typeahead}
+            disabled={disabled}
+            type='text'
+            autoComplete='off'
+            autoCorrect='off'
+            autoCapitalize='off'
+            spellCheck='false'
+            tabIndex='-1'
+            readOnly='readonly'
+            aria-hidden='true'
+            ref={typeaheadInput}
+          />
+        )}
 
         {hasClearButton && (
           <button

src/lib/components/container.test.jsx

@@ -37,7 +37,8 @@ describe('Container', () => {
       maxItems: 10,
       noItemsMessage: 'No matching fruit found',
       placeholder: 'Type something fruity',
-      styles: customStyles
+      styles: customStyles,
+      typeahead: true
     }
 
     const component = renderer.create(

src/lib/components/hooks/containerEffects.js

@@ -30,14 +30,15 @@ export const useAutoFocus = (queryInput, autoFocus) => { // TODO: might be able
 
 export const useQueryChange = (query, queryInput, typeaheadInput, onChange) => {
   useEffect(() => {
+    const hasTypeahead = !!typeaheadInput.current
     const value = (() => {
-      const currentValue = typeaheadInput.current.value
+      const currentValue = hasTypeahead ? typeaheadInput.current.value : ''
       if (!query) return ''
       if (!currentValue.startsWith(query)) return ''
       return currentValue
     })()
 
-    typeaheadInput.current.value = value
+    if(hasTypeahead) typeaheadInput.current.value = value
 
     setify(queryInput.current, query)
     if (typeof onChange === 'function') onChange(query)
@@ -55,7 +56,7 @@ export const useHighlight = (highlighted, hasFocus, queryInput, typeaheadInput)
         : ''
     const queryValue = formatQuery(queryInput.current.value, typeAheadValue)
 
-    typeaheadInput.current.value = typeAheadValue
+    if(typeaheadInput.current) typeaheadInput.current.value = typeAheadValue
 
     setify(queryInput.current, queryValue)
   }, [highlighted, hasFocus])
@@ -70,7 +71,7 @@ export const useSelected = (selected, queryInput, typeaheadInput, onSelect) => {
       displayField = undef
     }
     else {
-      typeaheadInput.current.value = ''
+      if(typeaheadInput.current) typeaheadInput.current.value = ''
       queryInput.current.blur()
       value = selected.value
       displayField = selected.displayField

src/lib/index.jsx

@@ -22,6 +22,7 @@ const propDefaults = {
   maxItems: 10,
   minQueryLength: 1,
   placeholder: '',
+  typeahead: true,
   Cancel: () => 'Cancel',
   Clear: () => '\u00d7'
 }
@@ -114,6 +115,7 @@ Turnstone.propTypes = {
   styles: PropTypes.object,
   tabIndex: PropTypes.number,
   text: PropTypes.string,
+  typeahead: PropTypes.bool,
   Cancel: PropTypes.elementType,
   Clear: PropTypes.elementType,
   Item: PropTypes.elementType,

src/lib/index.test.jsx

@@ -45,7 +45,8 @@ describe('Turnstone', () => {
       listboxIsImmutable: true,
       maxItems: 10,
       minQueryLength: 1,
-      placeholder: ''
+      placeholder: '',
+      typeahead: true
     })
   })
 })