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