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.

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

Multiselect: pTemplate="selectedItems" layout is empty on first render using Reactive forms #14424

Closed
rostislavcz opened this issue Dec 22, 2023 · 0 comments · Fixed by #14429
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@rostislavcz
Copy link

rostislavcz commented Dec 22, 2023

Describe the bug

Without custom template:

Screen.Recording.2023-12-22.at.17.40.10.mov

With custom template:

Screen.Recording.2023-12-22.at.17.40.34.mov

When using reactive form and custom template:
<ng-template let-items pTemplate="selectedItems">
On first render, items are undefined, but this is not rerendered when default values in formControl are set

In my opinion if I look to https://github.com/primefaces/primeng/blob/master/src/app/components/multiselect/multiselect.ts

Constructor part sets selectedOption property, but it seems that it is undefined at first call but, probably right after first render value changes, but there is set onPush strategy, so template won't redraw as it should

image

image

How to fix? Didnt tried, but probably this is very similar to dropdown:
image

So something like this should fix the problem
`

    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {
            effect(() => {
                const modelValue = this.modelValue();
    
                const visibleOptions = this.visibleOptions();
                if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions) && modelValue) {
                    if (this.optionValue && this.optionLabel) {
                        this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
                    } else {
                        this.selectedOptions = [...modelValue];
                    }
                    // ADD THIS!!!
                   this.cd.markForCheck();
                }
            });
        }

`

Environment

This bug will be in any environment

Reproducer

No response

Angular version

17.0.5

PrimeNG version

17.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.0.6

Browser(s)

all

Steps to reproduce the behavior

No response

Expected behavior

No response

@rostislavcz rostislavcz added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 22, 2023
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 26, 2023
@cetincakiroglu cetincakiroglu added this to the 17.3.0 milestone Dec 26, 2023
mehmetcetin01140 added a commit that referenced this issue Dec 26, 2023
cetincakiroglu added a commit that referenced this issue Dec 27, 2023
Fixed #14424 - Multiselect | pTemplate=selectedItems layout is empty …
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants