USWDS - Combo Box: Prevent list HTML from rebuilding every time the list is displayed [WIP]

[mahoneycm]

Summary

Note

This is a work in progress!

Performance enhancement to prevent combo box list HTML from appending to the DOM every time list is opened. Now, the DOM will only be modified when there are changes to the options list.

Breaking change

This is not a breaking change

Related issue

Closes #6193

Related pull requests

TK

Preview link

Combo box →
Time picker →

Problem statement

Every time the combo box list is opened, the JS rebuilds every li element within the unordered list whether there has been a change to the results or not.

Solution

Use a persistent optionsCache to compare the previous options array to the new options array. If options array matches cache, do not append a new list.

Major changes

TK

Testing and review

1. Go to Combo Box
2. Inspect HTML - At the start you see an empty ul element
3. Open the combo box drop down
4. li elements are appended to the DOM
5. While viewing the li elements in the devTools window, close and reopen the combo box
6. li elements are not affected
7. Use combo box input to filter results
8. Confirm combo box works as expected
9. Repeat steps for date picker