p-selectButton Not Selecting Default Option Value

[mikev10]

Describe the bug

The p-selectButton component does not correctly select the default option value when the component is initialized. This issue occurs even when the ngModel is set to a default value, and allowEmpty is set to false.

Additional Information:

• No errors are shown in the console.
• The p-selectButton component does not highlight the default option on page load.
• Attempted to manually add the p-highlight class using Renderer2, but it requires clicking the button twice to update the highlight.

I attached a stackblitz showing the issue.

Environment

Angular 18.1.1 Standalone SSR + PrimeNG 17.18.5

Reproducer

https://stackblitz.com/edit/angular-ssr-primeng?file=src%2Fapp%2Fapp.component.ts

Angular version

18.1.1

PrimeNG version

17.18.5

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.15.0

Browser(s)

126.0.6478.127 (Official Build) (64-bit)

Steps to reproduce the behavior

Create a p-selectButton component with the following configuration:

<p-selectButton
  [options]="buttonOptions"
  [(ngModel)]="selectedOption"
  optionLabel="label"
  optionValue="value"
  [allowEmpty]="false"
  class="mb-3"
></p-selectButton>

Initialize the component with the following values:

buttonOptions: any[] = [
  { label: 'One', value: 'one' },
  { label: 'Two', value: 'two' }
];
selectedOption: string = 'two';

Load the component in a browser.

Actual Behavior
The default option is not highlighted when the component is loaded. Additionally, when clicking on another option (e.g., "Rent"), the default option ("Buy") requires multiple clicks to toggle the highlight correctly.

Expected behavior

The p-selectButton component should correctly select and highlight the default option value when the component is initialized. Specifically:

• When the ngModel is set to a default value (e.g., 'two') and allowEmpty is set to false, the corresponding button (e.g., 'Two') should be highlighted immediately upon loading the component.
• The p-highlight class should be applied to the div element of the button corresponding to the default ngModel value, indicating that it is selected.
• Users should not need to interact with the component (e.g., clicking the button) to see the default selection highlighted.

Given the following configuration in the component:

<p-selectButton
  [options]="buttonOptions"
  [(ngModel)]="selectedOption"
  optionLabel="label"
  optionValue="value"
  [allowEmpty]="false"
  class="mb-3"
></p-selectButton>

And the following initialization in the TypeScript file:

buttonOptions: any[] = [
  { label: 'One', value: 'one' },
  { label: 'Two', value: 'two' }
];
selectedOption: string = 'two';

When the component is loaded, the 'Two' button should be highlighted, indicating it is selected by default.

[rosenthalj]

I believe that PrimeNG is working properly.

Your reproducer's @Component definition is incorrect.

Replace:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, SelectButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

With:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SelectButtonModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
}) 

[mikev10]

Thank you! This fixed my problem. I can't believe I missed that--to be fair, it is not very clear in the documentation that FormsModule is required.