From c62cee5352077a664b0a4540195f3a296966c075 Mon Sep 17 00:00:00 2001 From: joseph rosenthal Date: Thu, 8 Feb 2024 09:28:22 -0500 Subject: [PATCH] updated computed label logic for multiple casers 1) when computing the label, use all options verses just visible options this new logic 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 2) When finding selected option, consider all options even those that have been disabled --- src/app/components/dropdown/dropdown.ts | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) 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() {