How to detect when a user has opened and closed the select at least once

I am using an IonSelect in a form where I want to validate that a user has selected something (it is initially blank)

I am using a generic blur handler for all the form controls, where I check the following:

if (c.dirty || c.touched) && c.errors)
     setValidationError()

Where c is the control.

The problem with the select, is that when the options dialog is shown, we get the blur event and also c.touched for the select control, so straight away I get my error message displayed, before the user has a change to select.

I would just like to put off showing this until the select has been opened once, and then close with no selection (eg cancel). Of course if the user selects something, there is no validation error.

How can I know when a select has been opened and then closed? I have tries the oncancel, and many other events, but none of them fire.

You can use ionCancel as like below:

In .html file:

<ion-select [(ngModel)]="gaming" (ionCancel)="cancelSelect()">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
      <ion-option value="genesis">Sega Genesis</ion-option>
      <ion-option value="saturn">Sega Saturn</ion-option>
      <ion-option value="snes">SNES</ion-option>
    </ion-select>
<label *ngIf="isGamingTouched && gaming == undefined" color="red" >
  show your validation message
</label>

in .ts file

public gaming: any;
  public isGamingTouched: boolean = false;
  constructor(public navCtrl: NavController) {

  }
  cancelSelect(){
    console.log(this.gaming);
    this.isGamingTouched = true;
  }