Dropdown Placeholder Capability

[snowdave86]

Requesting new feature to be added to dropdown (placeholder capability). When using .push({ label: 'Select X', value: '' }); it will show the empty value option in the dropdown which is not true placeholder functionality.

[hhubik]

I second this. As an alternative or in addition to this, there should be a way to set the disabled attribute of one or more options to true. Perhaps the SelectItem interface could be extended to include an optional Disabled: boolean attributed with default of false.

[NishantHadole]

@snowdave86 @hhubik
Meanwhile, some workaround with little hack

export class ReportsComponent implements OnInit, AfterViewInit {

    reports: SelectItem[] = [];
    selectedReport;
    placeHolder: string = 'Select a Report';

    ngOnInit(): void {
        // populate reports
    }

    ngAfterViewInit(): void {
        this.hidePlaceHolder();

        let filterDivSelector: string = 'div.ui-dropdown-filter-container';
        jQuery(filterDivSelector).on('input', (event) => {
            this.hidePlaceHolder();
        });
    }

    hidePlaceHolder(): void {
        let placeHolderSelector: string = 'span:contains(' + this.placeHolder + ')';
        jQuery(placeHolderSelector).parent('li').hide();
    }
}

[sharok]

@cagataycivici Could you provide this feature, I use autocomplete, simple input and dropdown controls on the same page and when controls don't have data, dropdown looks different without placeholder. For now, I use different dropdown control, but I don't want to have separate lib for this. Or, Do you have workaround for this?

[cagataycivici]

I'm confused do you use autocomplete with dropdown option enabled or using p-dropdown?

[sharok]

I meant p-dropdown, because p-autoComplete has placeholder input.

[cagataycivici]

What is the problem with { label: 'Select X', value: '' }? Isn't it how it's done with a native select element as well?

[sharok]

@cagataycivici Yes, it's how native element works. I will show what I mean. For example, very popular select2 library. This is demo.
Another demo.

[cagataycivici]

Got it, thanks for the pointer. I've added placeholder property for this functionality.