bug (Reactive Forms | ion-select): Validation on ion-select

Bug Report

Ionic version:

[x] 4.x

Current behavior:

It is throwing validation error even though i am still on ion-select popup. Video Link : https://youtu.be/BJCj9Fr0aNk Screenshot:

Expected behavior:

It should show validation error if i cancelled the popup after opening the ion-select.

Steps to reproduce:

Repo : https://github.com/indraraj26/ionic4-starter-tabs-sidemenu

1. Download Above repo and switch to picker branch
2. click on go to form page.
3. open any ion-select and select any of the item from list.

Related code: HTML :
https://github.com/indraraj26/ionic4-starter-tabs-sidemenu/blob/picker/src/app/form-select/form-select.page.html

TS: https://github.com/indraraj26/ionic4-starter-tabs-sidemenu/blob/picker/src/app/form-select/form-select.page.ts

insert short code snippets here

Other information:

Ionic info:

D:\ionicv4-github\ionic4-tabs-sidemenu>ionic info

Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\indra26\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.4
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)

Utility:

   cordova-res : 0.8.0
   native-run  : 0.2.9

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10


D:\ionicv4-github\ionic4-tabs-sidemenu>

[amandaejohnston]

Thanks for the issue! I know it’s been a while, but I wanted to circle back to this.

This is happening because Reactive Forms’ touched property fires when the select is blurred, and this happens immediately when opening the ion-select because focus moves to the newly opened overlay.

As you surmised, this overlaps with this feature request for an ionDismiss event on ion-select: https://github.com/ionic-team/ionic-framework/issues/24088 As it happens, the PR for this has been merged into the feature branch: https://github.com/ionic-team/ionic-framework/pull/24400 Once Ionic 6.1 is released, you can listen for this ionDismiss event and set your own variable as a replacement for touched.

The reason this new ionDismiss event is needed is to cover the case where the user clicks OK without selecting anything. Other ways to close the overlay (clicking Cancel or the backdrop) will currently fire the ionCancel event.

It sounds like you already have a workaround through another boolean, which is good to hear. I wanted to add a couple other possibilities I thought of, in case it’s useful, though I acknowledge neither of them are ideal:

• Use interface="action-sheet" on the ion-select and listen for the ionCancel event instead of using touched. This interface doesn’t have an “OK” button, avoiding the edge case that ionDismiss is needed to cover.
• Set a default value on the ion-select, to avoid the validation error completely.

Since this issue will be resolved by an upcoming release, and the current behavior of the blur event is intentional, I’m going to close this out. Thank you for using Ionic, and please let me know if you have any questions.

[Shneeball]

+1 & this is also happening if you scroll up and down in the select options, see attached.