The autocomplete component needs to be split into two separate components

[alexwbbr]

The autocomplete component is currently just over 700 lines long and handles multiselect, loading of the options dynamically with the use of onChange and using static options which are then either filtered inside the autocomplete or with an external function using the search parameter. The reason for this refactor would be to reduce the code complexity and hopefully the size of the components so that they are easier to work on in the future.

The two new components would be DynamicAutocomplete and StaticAutoComplete, the main difference between the two components is how they handle filtering and the loading of options.
The dynamic autocomplete would have all filtering external to the component, done by the user, and the user would then update the options property to give the new results. Whereas the static autocomplete options property never changes it's value after it has received the data. The filtering can be done either externally or internally to the component however the options value is never updated by the user.

These two components would still need to handle the current functionality of switching to a form select if the user has turned off javascript and all of the accessibility features that have been added recently. The two components would NOT include the multiselect functionality which would be split off into it's own component in a separate ticket.

Tasks

• Autocomplete to be marked as deprecated
• Two new components to be created based off of the existing autocomplete, DynamicAutoComplete and StaticAutocomplete. (StaticAutocomplete can be created first as a base so that DynamicAutocomplete can extend the component)
• Updated documentation and tests for the components as well as updated examples in storybook.

Please follow these steps to create your branch:

git checkout release/1.1.0
git pull
git checkout -b 'feature/split-autocomplete'

[alexsteele95]

Looking into this

[SidG-CG]

@alexwbbr @Ibabalola
To streamline our discussion in one place, I am adding this information here. Lets continue our discussion in the comments of this ticket so it gets preserved for any future events.
While separating the dynamic and static auto complete functionality, where dynamic used onChange event to provide new options and static allowed an external filter function to be passed in via the 'Search' property, it appears that we can use 'Search' function to provide dynamic filteredList as return value and change the 'Options' at the same time. Furthermore, after the provided 'search' function is called, the code is running exactly the same code as when options are changed while calling 'onChange'. Hence defeating the purpose of having extra code and component for the Dynamic functionality.
Within the PR below, you can find that I have removed the 'onChange' property and I am utilising 'search' property to load options dynamically within the example project.
#672

Hence my suggestion will be that if we only want to change the options using 'onChange' event, we utilise the 'search' property and avoid adding additional component. Once we do see another use case for 'onChange' event we can extend the StaticAutocomplete component and call it something else.

I will also ask if StaticAutocomplete is the correct name for this component now? Would another name be better such as SimpleAutocomplete or something similar to tell it apart from 'Autocomplete' component?