Closes #4289

Changelog

New

Changed

Updated the autocomplete-input component to now emit a change event, once a user input makes the input value matches an autocomplete suggestion. This was not the case before, because of the way the autocomplete functionality is implemented:

-> To render the suggestion into the input field, the value of the underlying input-ref is set to match the next suggestion (if available) after every user input. Thus when the actual input of the user matches the value which is already stored in the input-ref, no change is emitted.

I fixed that by intercepting the exact keystroke where this issue would occur and implemented some custom logic instead of the default behaviour. React brings a private property _valueTracker which is used to track changes and act as a trigger for reacts onChange. I utilized this to manually trigger a change event.

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

The implementation utilizes a private property which is supposd to be some react internal object. Using it might not be the most elegant solution.
Another approcah i thought of was to just intercept the keystroke as is but call the setInputValue directly, instead of using the _valueTracker

[...]
if(inputValue + event.key === autocompleteSuggestion (...)) {
  event.prevenDefault()
  setIputValue(inputRef.current.value)
}
[...]

User outcome would basically be the same, but there would be no changeEvent being emitted. This lead to my decision of going for the _valueTracker approach. Would love to hear youre thoughts on this 😊

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)