Skip to content

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

Draft
mahoneycm wants to merge 1 commit into
developfrom
cm-combo-box-prevent-rebuild
Draft

USWDS - Combo Box: Prevent list HTML from rebuilding every time the list is displayed [WIP]#6195
mahoneycm wants to merge 1 commit into
developfrom
cm-combo-box-prevent-rebuild

Conversation

@mahoneycm

Copy link
Copy Markdown
Contributor

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

@mahoneycm mahoneycm changed the base branch from develop to cm-combo-box-enhance-results November 8, 2024 20:47
Base automatically changed from cm-combo-box-enhance-results to develop November 12, 2024 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

USWDS - Enhancement: Combo Box list HTML is rebuilt every time the list is displayed

1 participant