Why are previously selected options re-selected after updating the options in the select component?

[wizardnet972]

Please provide the environment you discovered this bug in.

I'm experiencing an unexpected behavior with a multiple-select component.

After reloading the options, selecting a new option causes the previously selected options to remain selected, instead of clearing out and only selecting the new choice.

1. Initially, in ngOnInit, the items are bound, and foo is null.
2. The user selects option 1 and option 2, so foo becomes [1, 2].
3. The user clicks "click here goto server and update options", and foo resets to [] as expected because the options were reloaded.
4. Now, if the user tries selecting option 4, the resulting value unexpectedly becomes [1, 2, 4] instead of just [4].

The expected behavior is that only option 4 is selected after reloading the options, but currently, options 1, 2, and 4 all appear selected.

Below is the minimal code to reproduce this issue:

import { CommonModule } from '@angular/common';
import { Component, signal } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmSelectImports } from '@spartan-ng/ui-select-helm';

@Component({
  selector: 'app-root',
  imports: [
    BrnSelectImports,
    HlmSelectImports,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
  ],
  template: `
    <brn-select
      class="inline-block"
      placeholder="Select an option"
      [formControl]="foo"
      [multiple]="true"
    >
      <hlm-select-trigger>
        <hlm-select-value />
      </hlm-select-trigger>
      <hlm-select-content class="w-56">
        <hlm-option *ngFor="let option of options()" [value]="option.value">
          {{ option.text }}
        </hlm-option>
      </hlm-select-content>
    </brn-select>
    foo.value: {{ foo.value | json }}
    <br>
    <button style="border:1px solid red;" (click)="updateOptions()">
      click here goto server and update options
    </button>
  `,
})
export class AppComponent {
  foo = new FormControl();
  options = signal<{ value: number; text: string }[]>([]);

  ngOnInit() {
    const items = [
      { value: 1, text: 'Option 1' },
      { value: 2, text: 'Option 2' },
      { value: 3, text: 'Option 3' },
      { value: 4, text: 'Option 4' },
    ];
    this.options.set(items);
  }

  updateOptions() {
    const items = [
      { value: 1, text: 'Option 1' },
      { value: 2, text: 'Option 2' },
      { value: 3, text: 'Option 3' },
      { value: 4, text: 'Option 4' },
    ];
    this.options.set(items);
  }
}

Which area/package is the issue in?

select

Please provide the exception or error you saw

No response

Other information

   "@angular/animations": "~19.0.0",
    "@angular/cdk": "18.0.0",
    "@angular/common": "~19.0.0",
    "@angular/compiler": "~19.0.0",
    "@angular/core": "~19.0.0",
    "@angular/forms": "~19.0.0",
    "@angular/platform-browser": "~19.0.0",
    "@angular/platform-browser-dynamic": "~19.0.0",
    "@angular/platform-server": "~19.0.0",
    "@angular/router": "~19.0.0",
    "@angular/ssr": "~19.0.0",
    "@ng-icons/core": "^29.10.0",
    "@ng-icons/lucide": ">=29.0.0",
    "@spartan-ng/brain": "0.0.1-alpha.380",
    "@spartan-ng/ui-accordion-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-alertdialog-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-avatar-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-collapsible-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-command-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-core": "0.0.1-alpha.380",
    "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-formfield-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-forms-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-hovercard-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-label-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-menu-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-popover-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-progress-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-radiogroup-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-select-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-separator-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-sheet-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-switch-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-table-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-tabs-brain": "0.0.1-alpha.374",
    "@spartan-ng/ui-toggle-brain": "0.0.1-alpha.374",

I would be willing to submit a PR to fix this issue

• Yes
• No