How to Clear p-select Value When Clicking on the Selected Item in PrimeNG?

I'm using PrimeNG in my Angular project, and I have a (Dropdown) component. I want to implement a feature where if a user clicks on the already selected item, the selected value should be cleared.

Expected Behavior:

• When a user selects an item, it should be set as the selected value.
• If the user clicks again on the same selected item, the selection should be cleared (set to null or an empty value).

How can I modify the PrimeNG p-dropdown component so that clicking the already selected option clears the selected value? Is there any workaround or built-in feature without using [showclear] for this?

I appreciate any help!

<p-select [options]="difficulty" [(ngModel)]="selectedDifficulty" optionLabel="name" placeholder="Difficulty"
class="w-full md:w-33" />

Continue reading...