Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 of 2 tasks
wizardnet972 opened this issue Dec 25, 2024 · 2 comments · Fixed by #571
Closed
1 of 2 tasks

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

wizardnet972 opened this issue Dec 25, 2024 · 2 comments · Fixed by #571
Assignees
@thatsamsonkid
Labels
bug Something isn't working

Comments

@wizardnet972
Copy link

wizardnet972 commented Dec 25, 2024 •
edited
Loading

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
@wizardnet972 wizardnet972 added the bug Something isn't working label Dec 25, 2024
@thatsamsonkid thatsamsonkid self-assigned this Jan 12, 2025
@thatsamsonkid
Copy link
Collaborator

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

@thatsamsonkid
Copy link
Collaborator

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.

@thatsamsonkid thatsamsonkid mentioned this issue Jan 28, 2025
Merged
57 tasks
@github-project-automation github-project-automation bot moved this from Todo to Done in Spartan UI V1 Roadmap Feb 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thatsamsonkid thatsamsonkid

Labels
bug Something isn't working
Projects
Spartan UI V1 Roadmap
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(select): select dynamic options spartan-ng/spartan
2 participants
@wizardnet972 @thatsamsonkid