Ionic-framework: Ion-select with ion-option value of false doesn’t close when you press ok

[Sjerd]

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
If the options are based on boolean OK won’t dismis the modal when you’ve selected no/false.

Expected behavior:
The modal to dismiss when you press ok if the boolean has a value of false

Steps to reproduce:
Here’s a plunker demonstrating the issue: http://plnkr.co/edit/ahLfoshf8gWTCowJi986?p=preview

Related code:

    <ion-select placeholder="Please choose">
      <ion-option *ngFor="let option of smokingOptions" [value]="option.value">{{ option.label }}</ion-option>
    </ion-select>  

  private smokingOptions: any[] = [
    {
      value: true,
      label: 'Yes',
    }, {
      value: false,
      label: 'No',
    }
  ];



md5-13f81ba14e2e1ece26e540dcd3b04298



$ ionic info

cli packages: (C:\projects\mobile-app\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : not installed

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.1
    npm  : 3.10.10
    OS   : Windows 10

[kensodemann]

Hello! Thank you for opening an issue with us!

I have duplicated the issue and played around with it a bit. It seems to only be an issue when using true and false boolean values. For the time being, can you work around the issue by using 0 and 1 or "true" and "false" (as strings)?

We will have to look into the underlying issue with using the boolean values.

Thank you for using Ionic

[c-goosen]

Also found this. Any updates on it?

[bravodavid56]

Still an issue, bump

[josiahdahl]

@c-goosen @bravodavid56 @kensodemann
TL;DR - Use interface="popover" or interface="action-sheet" to use boolean values.

The problem relates to how the ion-select uses an alert to display the values for selection. The value is just returned "as is"

(overlay as Alert).addButton({
        text: this.okText,
        handler: (selectedValues: any) => this.value = selectedValues
      });

Reference

From the AlertController documentation:

If a handler returns false then the alert will not automatically be dismissed when the button is clicked.

I edited the component file in node_modules to wrap the returned value in brackets and just return true, which made it function as expected, proving that this will resolve the issue. I don't know if there are other implications to not returning the actual value. Obviously editing node_modules isn't the solution!

// node_modules/ionic-angular/components/select/select.js
// FROM
overlay.addButton({
                text: this.okText,
                handler: function (selectedValues) { return _this.value = selectedValues; }
            });
// TO
overlay.addButton({
                text: this.okText,
                handler: function (selectedValues) {
                   _this.value = selectedValues; 
                   return true;
                 }
            });

The onDidDismiss handler doesn't do anything with the actual value, so I think it should be OK to not return the value.

overlay.onDidDismiss(() => {
  this._fireBlur();
  this._overlay = undefined;
});

Reference

What worked for me is to use interface="popover" or interface="action-sheet" if you need to use boolean true or false as values in an ion-select.

PR to fix this is here: https://github.com/ionic-team/ionic/pull/15019

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/888