Need ability to disable options in p-dropdown

[paulswan]

Would it be possible to add an optional disabled property to the SelectItem array for p-dropdown? This would allow us to prevent the selection of certain options. I believe this is quite a common use of the option tag and it would be pretty easy to implement.

The solution would go something like the following:

Code: Select all

export interface SelectItem {
    label: string;
    value: any;
    disabled?: boolean;
}

Code: Select all

<option *ngFor="let option of options" [value]="option.value" [selected]="selectedOption == option" [disabled]="option.disabled">{{option.label}}</option>

[paulswan]

Just noticed this is covered in 2 x "New Feature Requests" and one of them is added to the 4.1.1 milestone. Good to see something happening with this
https://github.com/primefaces/primeng/issues/2192
https://github.com/primefaces/primeng/issues/586

[paulswan]

This feature obviously didn't make it for milestone 4.1.1 but I don't see it planned for 4.1.2 either. Any idea when this will be done?

[ogousa]

You can disable any item in dropdown using ng-template, click event and custom style, like this:

Code: Select all

    cars: any[];
    selectedCar: string;

	ngOnInit(): void {

		this.cars = [];
		this.cars.push({label: 'Audi', value: 'Audi'});
		this.cars.push({label: 'BMW', value: 'BMW'});
		this.cars.push({label: 'Fiat', value: 'Fiat', disabled: true});
		this.cars.push({label: 'Ford', value: 'Ford'});
		this.cars.push({label: 'Honda', value: 'Honda', disabled: true});
		this.cars.push({label: 'Jaguar', value: 'Jaguar'});
		this.cars.push({label: 'Mercedes', value: 'Mercedes'});
		this.cars.push({label: 'Renault', value: 'Renault'});
		this.cars.push({label: 'VW', value: 'VW'});
		this.cars.push({label: 'Volvo', value: 'Volvo'});
	}
	
	onClick(disabled: boolean) {
		if(disabled) {
			event.stopPropagation();
		}
	}

Code: Select all

    <p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
        <ng-template let-option pTemplate="item">
            <div>
                <div (click)="onClick(option.disabled)" [ngStyle]="option.disabled? {'color': '#ccc', 'cursor': 'default'} : ''">{{option.label}}</div>
            </div>
        </ng-template>
    </p-dropdown>

[vigalo]

Hello, ogousa :

There is a problem with this workarond. If you click between two items, you can select a disabled item. This is because <li> itself is not disabled.

The problem is bigger in the Ultima template, because the padding in the <li>

Any idea to solve this?

Thanks.

[Guravman]

Hello vigalo / ogousa
Any luck with the issue? I am facing same problem.