<p-select> Support deselect the selected option by clicking on the option

[yongshun950824]

Raised in this Stack Overflow question: How to Clear p-select Value When Clicking on the Selected Item in PrimeNG?.

Based on my study on the onOptionClick method, it only handles the option that is not previously selected and emits the onChange event.

Currently what I implement is to overwrite the existing onOptionClick method and add the logic to deselect the selected option (when clicking on the same option).

import { ViewChild } from '@angular/core';
import { Select } from 'primeng/select';

@ViewChild(Select) mySelect: Select;

ngAfterViewInit() {
  this.mySelect.onOptionSelect = (
    event,
    option,
    isHide = true,
    preventChange = false
  ) => {
    if (!this.mySelect.isSelected(option)) {
      const value = this.mySelect.getOptionValue(option);
      this.mySelect.updateModel(value, event);
      this.mySelect.focusedOptionIndex.set(
        this.mySelect.findSelectedOptionIndex()
      );
      preventChange === false &&
        this.mySelect.onChange.emit({ originalEvent: event, value: value });
    } else {
      this.mySelect.clear();
    }

    if (isHide) {
      this.mySelect.hide(true);
    }
  };
}

Stack Overflow answer: https://stackoverflow.com/a/79423216/8017690
StackBlitz Demo: https://stackblitz.com/edit/bbzsyzyc?file=src%2Fapp%2Fselect-checkmark-demo.ts

I would like to propose to have a configuration for <p-select>, for example [allowDeselectOption]="true", and apply similar logic as attached above.

Looking forward to the discussion of the proposal!

Thank you in advance.