Dropdown head is empty if no value is provided

[gpobr]

Describe the bug

Dropdown that defines a custom selectedItem template, is empty when no initial value or a placeholder is provided.

Environment

Windows

Reproducer

https://stackblitz.com/edit/yczs8n-mr98fr?file=src%2Fapp%2Fdemo%2Fdropdown-template-demo.html

Angular version

17.1.2

PrimeNG version

17.9.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.9.0

Browser(s)

No response

Steps to reproduce the behavior

1. Define a dropdown
2. Do not provide placeholder value
3. Do not provide initial value

Expected behavior

The dropdown should be the same size as dropdowns with value.

[dalenguyen]

How about adding a placeholder for it?

  <p-dropdown
    [options]="countries"
    [(ngModel)]="selectedCountry"
    optionLabel="name"
    placeholder="Select a Country"
    [showClear]="true"
  >

[gpobr]

How about adding a placeholder for it?

  <p-dropdown
    [options]="countries"
    [(ngModel)]="selectedCountry"
    optionLabel="name"
    placeholder="Select a Country"
    [showClear]="true"
  >

Hi @dalenguyen, that would be an obvious solution. The thing is that a placeholder is redundant for dropdowns that use a float-label.

If no placeholder value is provided, then the expected behavior would be to display something like an empty character.
Placeholder should not be a prerequisite.

I have updated the Reproducer code to show the case with float-label.

[dimd13]

Hello, i have the same problem! I don't need the placeholder, it's just an optional attribute, but if selected item is null field is shrinking

primeng 17.10.0
angular 17.0.2

https://stackblitz.com/edit/d2r6ts?file=src%2Fapp%2Fdemo%2Fdropdown-template-demo.html

[dalenguyen]

Temporary solution: I think you can try to use global css to fix it:

p-dropdown > div {
    min-height: 40px;
    min-width: 200px;
}

[gpobr]

Thanks for your response @dalenguyen

I would avoid setting a static height value because the element's height is dynamically calculated as the sum of font-size+padding. Width is always set to 100% of the container element's box size.

What I'm doing, for now, is setting the placeholder value to "_". This will display a dash until an option is selected.
You can also set the placeholder's opacity to 0, under conditions.

I can easily apply this system-wide because all p-dropdown elements are implemented via a wrapper component.

[dalenguyen]

It's not static. It has a minimum value set min- though. Your solution also works 😄

[gpobr]

Yes, you're right, it's not completely static. I want to avoid adding a value based on visual/manual estimation 😃