Skip to content

Commit

Permalink
updated computed label logic for multiple casers
Browse files Browse the repository at this point in the history
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
  • Loading branch information
rosenthalj committed Feb 8, 2024
1 parent 4e6110e commit c62cee5
Showing 1 changed file with 16 additions and 4 deletions.
20 changes: 16 additions & 4 deletions src/app/components/dropdown/dropdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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() {
Expand Down

0 comments on commit c62cee5

Please sign in to comment.