Angular Slickgrid - customValidator not working for SingleSelect editor

Currently, I have angular-slickgrid with enabled Editors.singleSelect inline editor for a cell. I want to validate the selected dropdown value based on some condition. I referred this example for creating a custom validator but I'm not getting the alert message.

From this example, the below method is triggering for Editors.text but not for Editors.singleSelect type.

component.ts

        itemValidator: EditorValidator = (value: any, args: EditorArgs) => {
            // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it
            const grid = args && args.grid;
            const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {};
            const translate = gridOptions.i18n;
        
            // to get the editor object, you'll need to use "internalColumnEditor"
            // don't use "editor" property since that one is what SlickGrid uses internally by it's editor factory
            const columnEditor = args && args.column && args.column.internalColumnEditor;
        
            // random condition check
            const items = ['item1', 'item2', 'item3'];
            if (items.includes(value)) {
                return { valid: false, msg: 'Invalid item' };
            }
            return { valid: true, msg: '' };
        };
    ......
    // ----------------Column definition----------------------------
    {
        id: 'item', name: 'Item', field: 'item',
        sortable: true,
        filterable: true,
        editor: {
            model: Editors.singleSelect,
            collection: [
                {value: 'item1', label: 'Item 1'},
                {value: 'item2', label: 'Item 2'},
                {value: 'item3', label: 'Item 3'},
                {value: 'item4', label: 'Item 4'},
                {value: 'item5', label: 'Item 5'},
                {value: 'item6', label: 'Item 6'},
                {value: 'item7', label: 'Item 7'},
            ],
            validator: this.itemValidator
        }
    }
    ........

    // ----------------Prompting alert if any error----------------------------
        onValidationError(e, args) {
            alert(args.validationResults.msg);
        }

component.html

    <angular-slickgrid gridId="dataGrid" (onAngularGridCreated)="angularGridReady($event)"
        (sgOnBeforeEditCell)="onCellBeforeEditCell($event.detail.eventData, $event.detail.args)"
        (sgOnBeforeCellEditorDestroy)="onAfterEditCell($event.detail.eventData, $event.detail.args)"
        (sgOnValidationError)="onValidationError($event.detail.eventData, $event.detail.args)"
        [columnDefinitions]="colDefn" [gridOptions]="gridOptions"
        [dataset]="dataset" [gridHeight]="gridHeight" >
    </angular-slickgrid>

If I changed the editor type from Editors.singleSelect to Editors.text its validating as expected.

Note that I'm the author of Angular-Slickgrid and that was a bug which is now fixed under the new version 2.21.3

The following code now works

prepareGrid() {
  this.columnDefinitions = [
    {
        id: 'complete',
        name: '% Complete',
        field: 'percentComplete',
        type: FieldType.number,
        editor: {
          model: Editors.singleSelect,
          validator: (value, args) => {
            if (value < 50) {
              return { valid: false, msg: 'Please use at least 50%' };
            }
            return { valid: true, msg: '' };
          }
        }
    }
  ];
}

onValidationError(e, args) {
    if (args.validationResults) {
      alert(args.validationResults.msg);
    }
}

Will show this alert when the value I chose is below 50%.