Is it possible to clear the input programatically

I would like to clear the input box programmatically. I’ve almost made it work, but the result is the dropdown opens again ad a side effect.

I’m doing this:

   accessibleAutocomplete({
      element: containerElement,
      selectElement: multiselectElement,
      defaultValue: '',
      confirmOnBlur: false,
      showAllValues: true,
      id: autocompleteId,
      onConfirm: handleAdd,
      source: getSource
    });

    function handleAdd(value) {
      // hack to clear the input box. delay 150ms to allow the react component
      // to render iwth the new value first.
      // hide the selected value by making it the same colour as the input box
      autocompleteInputElement.style.color = 'white';
      setTimeout(function() {
        autocompleteInputElement.value = '';
        autocompleteInputElement.style.color = 'black';
      }, 150);
    }

yes., it’s a horrible hack and is subject to race condition. is there a built-in way?

[edwardhorsford]

I got this working fully today (I hope!). Code here.

Edward, your link is dead. Do you have this code available somewhere else?

Fixed. The source repo had a reorg, so repointed to the new location.

[edwardhorsford]

I got this working fully today (I hope!). Code here.

Required this dance to get it to work:

const removeValue = () => {
        // Clear autocomplete and hidden select
        $enhancedElement.val('')
        $(element).parent().find('select').val('')

        // Needed to collapse menu
        $enhancedElement.click()
        $enhancedElement.focus()
        $enhancedElement.blur()

        // Return focus to the button
        removeButton.focus()
      }

How it looks on our service: