programatically trigger searches by setting value attribute

src/autocomplete/autocomplete.js

@@ -16,6 +16,7 @@ export default ({
   params,
   options,
   placeholder = strings.inputPlaceholder,
+  value = '',
   autoFocus = false,
   debounce: debounceWait = 200,
   onSelect: userOnSelectItem,
@@ -27,25 +28,29 @@ export default ({
   const [isLoading, setIsLoading] = useState(false)
   const inputRef = useRef()
 
+  // setting params & options as state so they can be passed to useMemo as dependencies,
+  // which doesn’t work if they’re just objects as the internal comparison fails
+  const [apiParams, setApiParams] = useState(params)
+  const [apiOptions, setApiOptions] = useState(options)
+
   // Geocode Earth Autocomplete Client
   const autocomplete = useMemo(() => {
     return createAutocomplete(apiKey, params, {
       ...options,
       client: `ge-autocomplete${typeof VERSION !== 'undefined' ? `-${VERSION}` : ''}`
     })
-  }, [apiKey, params, options])
+  }, [apiKey, apiParams, apiOptions])
 
   // search queries the autocomplete API
   const search = useCallback(text => {
-    if (!text) return
-
     autocomplete(text).then(({ features, discard }) => {
       if (discard || inputRef.current.value !== text) {
         return
       }
 
       setIsLoading(false)
       setResults({ text, features })
+      openMenu()
     })
     .catch(onError)
   }, [autocomplete])
@@ -57,20 +62,27 @@ export default ({
 
   const onInputValueChange = ({ type, inputValue }) => {
     const term = inputValue.trim()
-    if (term === '') {
-      setIsLoading(false)
-      setResults(emptyResults)
-    }
 
     // call user-supplied onChange callback
     if (typeof userOnChange === 'function') {
       userOnChange(term)
     }
 
+    if (term === '') {
+      setIsLoading(false)
+      setResults(emptyResults)
+      return
+    }
+
     // only search if the input value actually changed and not if an item was selected,
     // which also fires this callback. this prevents an additional request after the user has already
     // selected an item.
-    if (type === useCombobox.stateChangeTypes.InputChange && term.length > 0) {
+    const searchOn = [
+      useCombobox.stateChangeTypes.InputChange,
+      useCombobox.stateChangeTypes.FunctionSetInputValue
+    ]
+
+    if (searchOn.includes(type)) {
       setIsLoading(true)
       debouncedSearch(term)
     }
@@ -101,6 +113,10 @@ export default ({
     }
   }, [autoFocus])
 
+  // if an initial value is provided trigger a search with that, which allows
+  // programmatically setting the value attribute, for example for a typewriter effect
+  useEffect(() => setInputValue(value), [value])
+
   // downshift combobox
   const {
     isOpen,
@@ -109,7 +125,9 @@ export default ({
     getInputProps,
     getComboboxProps,
     highlightedIndex,
-    getItemProps
+    getItemProps,
+    setInputValue,
+    openMenu
   } = useCombobox({
     environment,
     itemToString,

src/index.js

@@ -57,6 +57,7 @@ class GEAutocomplete extends HTMLElement {
       'debounce',
       'lang',
       'size',
+      'value',
       'layers',
       'sources',
       'boundary.country',
@@ -73,6 +74,16 @@ class GEAutocomplete extends HTMLElement {
     ]
   }
 
+  // getter & setter for the value attribute as _if_ any attribute is programatically
+  // changed then it’s this one
+  get value () {
+    return this.getAttribute('value')?.trim()
+  }
+
+  set value (text) {
+    this.setAttribute('value', text)
+  }
+
   // props returns element attributes converted to props to be passed on
   // to the react component
   get props () {
@@ -81,6 +92,7 @@ class GEAutocomplete extends HTMLElement {
       placeholder: this.getAttribute('placeholder'),
       autoFocus: this.getAttribute('autofocus') !== null,
       debounce: parseInt(this.getAttribute('debounce')),
+      value: this.value,
       params: compact({
         lang: this.getAttribute('lang'),
         size: parseInt(this.getAttribute('size')),