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

### Describe the bug

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.

### Steps to reproduce the bug

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 flash because they are removed and re-appended to the DOM

### Expected Behavior

`li` elements should only be removed and added to the DOM when there is a change to the list or required attributes.

### Related code

Code that builds the options HTML:
https://github.com/uswds/uswds/blob/f0684a3812d85d26c3868c9368ec8bf1689a0d52/packages/usa-combo-box/src/index.js#L409-L439

Code that determines when to append the HTML:
https://github.com/uswds/uswds/blob/f0684a3812d85d26c3868c9368ec8bf1689a0d52/packages/usa-combo-box/src/index.js#L447-L455

### Screenshots

Recording of this behavior:

https://github.com/user-attachments/assets/5a5e1478-e393-4d4b-92c1-eda1be63f92d



### System setup

- USWDS Version: `3.9.0`
- Operating System: MacOS Sonoma 14.6.1
- Browser: Arc (chromium)

### Additional context

_No response_

### Code of Conduct

- [x] I agree to follow this project's [Code of Conduct](https://designsystem.digital.gov/about/community/#community-conduct).
- [x] I checked the [current issues](https://github.com/uswds/uswds/issues?q=is%3Aissue+is%3Aopen+label%3A%22Type%3A+Bug%22) for duplicate bug reports.

	const optionHtml = options.map((option, index) => {
	const optionId = `${listOptionBaseId}${index}`;
	const classes = [LIST_OPTION_CLASS];
	let tabindex = "-1";
	let ariaSelected = "false";

	if (optionId === selectedItemId) {
	classes.push(LIST_OPTION_SELECTED_CLASS, LIST_OPTION_FOCUSED_CLASS);
	tabindex = "0";
	ariaSelected = "true";
	}

	if (!selectedItemId && index === 0) {
	classes.push(LIST_OPTION_FOCUSED_CLASS);
	tabindex = "0";
	}

	const li = document.createElement("li");

	li.setAttribute("aria-setsize", options.length);
	li.setAttribute("aria-posinset", index + 1);
	li.setAttribute("aria-selected", ariaSelected);
	li.setAttribute("id", optionId);
	li.setAttribute("class", classes.join(" "));
	li.setAttribute("tabindex", tabindex);
	li.setAttribute("role", "option");
	li.setAttribute("data-value", option.value);
	li.textContent = option.text;

	return li;
	});

	if (numOptions) {
	listEl.innerHTML = "";
	optionHtml.forEach((item) =>
	listEl.insertAdjacentElement("beforeend", item),
	);
	} else {
	listEl.innerHTML = "";
	listEl.insertAdjacentElement("beforeend", noResults);
	}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Describe the bug

Steps to reproduce the bug

Expected Behavior

Related code

Screenshots

System setup

Additional context

Code of Conduct

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Describe the bug

Steps to reproduce the bug

Expected Behavior

Related code

Screenshots

System setup

Additional context

Code of Conduct

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions