unsetting the value that is been set is not working

[kth13]

We are using the accessible auto complete for our application. We are using the js along with Nunjucks. The steps to reproduce the error

• Type the element you want to select and auto complete picks up the element and sets in the input field
• select the element you want
• delete that element
• submit the form, still the input field has the old value.
• is there any way to unset the element from the input box

[DavidBiddle]

We got feedback about a case of this on a service we have which uses the autocomplete. In our case it was noticed when using a 'change your answers' journey - if a user:

• has previously set a value
• follows a 'Change' link to go back and change their answers
• removes the default value
• presses 'Save and continue'

then their original answer will be saved.

I can see this potentially being confusing in this context, but I'm not sure if there's another behaviour we'd expect. The component is designed to allow a user to pick from a list of predefined values, and an empty value isn't a valid value, so I can see the logic of not allowing a user to unset it.

[AlexMoulin]

We had the same issue. We solved it using the onConfirm function and the following code: onConfirm: () => { let input = document.querySelector('#${theId}'); let select = document.querySelector('#${theId}-select'); let options = Array.from(select.options); if (!input.value || !options.some(option => option.innerText === input.value)) { select.options.selectedIndex = -1; } else { select.options.selectedIndex = options.findIndex(option => option.innerText === input.value); } } Effectively, if the user clears the input field, it deselects the options. If the value in the input is not one of the options in the list, then it doesn't select anything. I am not sure if this helps anyone else running into this limitation.