Is it possible to clear the input programatically

[richtier]

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?

[jonheslop]

Going to look into implementing this after releasing GOV.UK Pay needs it

[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:

[potatowave]

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

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

[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.

[potatowave]

Thanks @edwardhorsford. I'm trying to achieve the same in React.

[boaterdan]

Was there ever a real solution to this? As of this writing, the solution of @edwardhorsford doesn't work. It closes the dropdown, but leaves the first option selected. I want it to be CLEAR when I'm done. I have tried a million different things and cannot get it do something that is utterly critical when manipulating the input with Javascript.