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

[thatsamsonkid]

I think I know where the issue might be so I can take a look

[thatsamsonkid]

Ok so I recreated this with a mat-select because I wanted to confirm the behavior. You can have a look here
https://stackblitz.com/edit/mat-spartan-select?file=src%2Fexample%2Fselect-error-state-matcher-example.ts

So I noticed that mat-select actually seems to retain the value based on the available options as much as it can.

1. If exact same options are "updated" then the value remains the same
2. If there is only a partial update, some same and some different then mat-select seems to just update the value by removing whatever options are no longer available.
3. If options are completely different values then the value is getting reset

So from what I can tell Spartan Select is currently only matching scenario 3 behavior. Our true fix would be to match scenario 1 and 2 behaviors I believe. @wizardnet972 - let me know what you think, I think this is not quite what you were expecting based on the example you gave. But seems if the options are exact same then we shouldn't be resetting the value.