diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 54c58442874..715314aa622 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -903,7 +903,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV } visibleOptions = computed(() => { - const options = this.group ? this.flatOptions(this.options) : this.options || []; + const options = this.getAllVisibleAndNonVisibleOptions(); if (this._filterValue()) { const _filterBy = this.filterBy || this.optionLabel; @@ -938,9 +938,13 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV }); label = computed(() => { - const selectedOptionIndex = this.findSelectedOptionIndex(); + // use getAllVisibleAndNonVisibleOptions verses just visible options + // this will find the selected option whether or not the user is currently filtering because the filtered (i.e. visible) options, are a subset of all the options + const options = this.getAllVisibleAndNonVisibleOptions(); + // use isOptionEqualsModelValue for the use case where the dropdown is initalized with a disabled option + const selectedOptionIndex = options.findIndex((option) => this.isOptionEqualsModelValue(option)); - return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel'; + return selectedOptionIndex !== -1 ? this.getOptionLabel(options[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel'; }); filled = computed(() => { @@ -971,6 +975,10 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV }); } + private getAllVisibleAndNonVisibleOptions() { + return this.group ? this.flatOptions(this.options) : this.options || []; + } + ngOnInit() { this.id = this.id || UniqueComponentId(); this.autoUpdateModel(); @@ -1126,7 +1134,11 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV } isSelected(option) { - return this.isValidOption(option) && ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); + return this.isValidOption(option) && this.isOptionEqualsModelValue(option); + } + + private isOptionEqualsModelValue(option: any) { + return ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey()); } ngAfterViewInit() {