HTMLOptionElement.selected not behaving correctly

[coffeeandwork]

Describe the bug
If you have a <select> element with the multiple attribute set, with 2 values selected, and you unselect one of the values programmatically, the HTMLSelectElement.selectedOptions does not seem to show have the correct values.

To Reproduce
Steps to reproduce the behavior:

1. Create a new file test.js with the following code:

import { GlobalRegistrator } from '@happy-dom/global-registrator';
GlobalRegistrator.register();
function addNewOptionElement(selectElement, val) {
  const option = document.createElement('option');
  option.value = val;
  option.text = val;
  selectElement.appendChild(option);
  return option;
}
const select = document.createElement('select');
select.multiple = true;
document.body.appendChild(select);
const option1 = addNewOptionElement(select, 'Option 1');
const option2 = addNewOptionElement(select, 'Option 2');
const option3 = addNewOptionElement(select, 'Option 3');
option1.selected = true;
option2.selected = true;
option3.selected = false;
console.log('total number of selected options:', select.selectedOptions.length);
option1.selected = false;
console.log('total number of selected options:', select.selectedOptions.length);
await GlobalRegistrator.unregister();

2. Run it the code in command line:

Either using node:

$> node ./test.js

Or, using bun.sh:

$> bun run ./test.js

4. Both of them produce the following incorrect but identical output:

total number of selected options: 2
total number of selected options: 2

The first value being 2 is correct because we have selected 'Option 1' and 'Option 2'. However, the second value of 2 is incorrect because we have unselected 'Option 1' with the statement option1.selected = false;.

Expected behavior
Here is the code I ran in chrome browser's developer console (only difference being that I have removed the calls to the GlobalRegistrator):

function addNewOptionElement(selectElement, val) {
  const option = document.createElement('option');
  option.value = val;
  option.text = val;
  selectElement.appendChild(option);
  return option;
}
const select = document.createElement('select');
select.multiple = true;
document.body.appendChild(select);
const option1 = addNewOptionElement(select, 'Option 1');
const option2 = addNewOptionElement(select, 'Option 2');
const option3 = addNewOptionElement(select, 'Option 3');
option1.selected = true;
option2.selected = true;
option3.selected = false;
console.log('total number of selected options:', select.selectedOptions.length);
option1.selected = false;
console.log('total number of selected options:', select.selectedOptions.length);

The output showed correctly where as follows:

total number of selected options: 2
total number of selected options: 1

This output is correct.

Screenshots
Screenshot below shows the above test working correctly in Google Chrome

Device:

• OS: MacOS Sequoia 15.1 (24B83)
• Browser chrome
• Version 130.0.6723.116 (Official Build) (arm64)

Additional context
I tried this using the following versions of node and bun.sh:
node: v22.0.0
bun.sh: 1.1.31

[kleinfreund]

Similarly, selected also seems to be incorrect in a single choice select:

<select name="species">
	<option value=""></option>
	<option value="ferengi"></option>
	<option value="cardassian"></option>
	<option value="bajoran" selected></option>
</select>

It always seems to consider the second option as the selected one and so document.querySelector('select').value returns "ferengi" when it should be "bajoran".

Tested on happy-dom@16.7.1.

---

Update: I checked out the project locally to dig around a little bit and noticed a test that doesn't quite work right (though it doesn't explain the issue I reported here).

In test/nodes/html-select-element/HTMLSelectElement.test.ts → HTMLSelectElement → get value(), the test is a false positive because the [PropertySymbol.selectNode] of the options is still null. Adding a third option and selecting it instead of the first one shows that the test starts to fail when it should still succeed.

		it('Returns the value of the first option element in the list of options in tree order that has its selectedness set to true.', () => {
			const option1 = <HTMLOptionElement>document.createElement('option');
			const option2 = <HTMLOptionElement>document.createElement('option');
			const option3 = <HTMLOptionElement>document.createElement('option');
			option3.selected = true; // <-- this happens too early
			option1.value = 'option1';
			option2.value = 'option2';
			option3.value = 'option3';
			element.appendChild(option1);
			element.appendChild(option2);
			element.appendChild(option3);

			expect(element.value).toBe('option3'); // fails
		});

Oddly, this does not happen if you select the second option. Moving the selection of the option to below the appendChild calls fixes the test.

		it('Returns the value of the first option element in the list of options in tree order that has its selectedness set to true.', () => {
			const option1 = <HTMLOptionElement>document.createElement('option');
			const option2 = <HTMLOptionElement>document.createElement('option');
			const option3 = <HTMLOptionElement>document.createElement('option');
			option1.value = 'option1';
			option2.value = 'option2';
			option3.value = 'option3';
			element.appendChild(option1);
			element.appendChild(option2);
			element.appendChild(option3);
			option3.selected = true; // <-- moved below the `appendChild` calls

			expect(element.value).toBe('option3'); // passes
		});