PrimeNG p-multiSelect: Keep Selected Items on Top

[CavidH]

I'm using PrimeNG's p-multiSelect component with multiple selection enabled. Every time I select an item, I don't want to search for it again in the list. Instead, I want the selected items to always appear at the top of the dropdown.

Current Behavior:

When I select multiple items, they stay in their original position in the list.
If the list is long, I have to scroll or search again to find my selected items.
Expected Behavior:

Selected items should automatically move to the top of the list.
The remaining unselected items should stay below the selected ones.
What I've Tried:
I tried sorting the options manually when the selection changes, but I couldn't achieve the desired behavior.

<p-multiSelect 
  [options]="sortedOptions" 
  [(ngModel)]="selectedValues" 
  optionLabel="name" 
  (onChange)="sortSelectedOptions()">
</p-multiSelect>



sortedOptions: any[] = [];
selectedValues: any[] = [];

options = [
  { name: 'Apple', value: 'apple' },
  { name: 'Orange', value: 'orange' },
  { name: 'Banana', value: 'banana' },
  { name: 'Mango', value: 'mango' }
];

ngOnInit() {
  this.sortedOptions = [...this.options];
}

sortSelectedOptions() {
  this.sortedOptions = [
    ...this.selectedValues, 
    ...this.options.filter(opt => !this.selectedValues.includes(opt))
  ];
}