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

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?).

primefaces / primeng