p-dropdown don't display selectedItem template content when editable = True

[NellyAntoine]

Describe the bug

Hello All, When I use the dropdown and template for rendering, it works fine if editable=false but it doesn't work as expected when editable=true if you enter a new item (edit a new one) or select an existing item (select one).

<h2>PrimeNG Issue Template</h2>

<div class="p-fluid p-grid">
  <div class="p-field p-col-12 p-mb-6">
    <div class="p-mb-6">
      <h3>[editable]="false" (Template "selectedItem" working)</h3>
    </div>
    <span class="p-float-label">
      <p-dropdown
        inputId="dropdown1"
        [autoDisplayFirst]="false"
        [options]="list"
        [editable]="false"
        [showClear]="true"
      >
        <ng-template let-contexte pTemplate="selectedItem">
          <div>
            <div>
              <span
                ><b>{{ contexte['label'] }}</b> | {{ contexte['value'] }}</span
              >
            </div>
          </div>
        </ng-template>
        <ng-template let-contexte pTemplate="item">
          <div>
            <div>
              <span
                ><b>{{ contexte['label'] }}</b> | {{ contexte['value'] }}</span
              >
            </div>
          </div>
        </ng-template>
      </p-dropdown>
      <label for="dropdown1">Dropdown 1</label>
    </span>
  </div>

  <div class="p-field p-col-12">
    <div class="p-mb-6">
      <h3>
        [editable]="true" (Template "selectedItem" not working whether entering
        a new element or selecting an existing element)
      </h3>
    </div>

    <span class="p-float-label">
      <p-dropdown
        inputId="dropdown2"
        [autoDisplayFirst]="false"
        [options]="list"
        [editable]="true"
        [showClear]="true"
      >
        <ng-template let-contexte pTemplate="selectedItem">
          <div>
            <div>
              <span
                ><b>{{ contexte['label'] }}</b> | {{ contexte['value'] }}</span
              >
            </div>
          </div>
        </ng-template>
        <ng-template let-contexte pTemplate="item">
          <div>
            <div>
              <span
                ><b>{{ contexte['label'] }}</b> | {{ contexte['value'] }}</span
              >
            </div>
          </div>
        </ng-template>
      </p-dropdown>
      <label for="dropdown2">Dropdown 2</label>
    </span>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  counter = 0;
  list = [
    { label: 'Australia', value: 'AU' },
    { label: 'Brazil', value: 'BR' },
    { label: 'China', value: 'CN' },
    { label: 'Egypt', value: 'EG' },
    { label: 'France', value: 'FR' },
    { label: 'Germany', value: 'DE' },
    { label: 'India', value: 'IN' },
    { label: 'Japan', value: 'JP' },
    { label: 'Spain', value: 'ES' },
    { label: 'United States', value: 'US' },
  ];
}

Environment

PrimNG 16.0.2 with dropdown editable feature

Reproducer

https://stackblitz.com/edit/github-y5gxxm-yoidjx

Angular version

16.0.3

PrimeNG version

16.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.17.1

Browser(s)

No response

Steps to reproduce the behavior

in StackBlitz example Select Element in dropdown1 -> rendering is OK Select Element in dropdown 2 -> rendering is KO Enter new Element in dropdown2 -> rendering is KO

Expected behavior

I would like the render of the template to work when I select an item from the editable dropdown (like when editable=false) and for example render to bold the value I enter manually when writing a new (maybe with a new pTemplate = NewItem?).

[michaelmaschinenf]

I have the some problem with version 16.9.1. pTemplate="selectedItem" is ignored when editable=true. Has anybody found a fix or workaround for this?

[Pradip1399]

Same problem replicating in version 17.18.8. Please resolve ASAP.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding! Best Regards,

[faileon]

The issue still exists on v19.0.2, should not be closed imho.