iOS: ActionSheet roles ignored, Radio inputs in Alert acting completely weird

mich356c · January 3, 2017, 10:52am

The culprit has been found, and is kinda unrelated to everything below. New thread here about the issue.

Hi everyone and happy new year!

I’m running into some weird issues on the iOS version of the app that I am working on. Everything is working just fine in the browser (with Android/iOS/WP CSS) and on an Android device, but on an iOS device it derps out. Here’s screenshots and code:

ActionSheet roles ignored

As you can see in the code, the last 2 buttons are the “Remove” and “Cancel” buttons, but they’re not listed separately nor are they a differently styled compared to the normal ones, even though they have their roles defined.

let buttons: Array<any> = [];

buttons.push(
    {
        text: this.translate.instant("translation.path.change"),
        handler: () => {
            // Handle
        }
    },
    ...
);

buttons.push({
    text: this.translate.instant("translation.path.remove"),
    role: 'destructive',
    handler: () => {
        // Handle
    }
},{
    text: this.translate.instant("translation.path.cancel"),
    role: 'cancel',
    handler: () => {
        // Handle
    }
});

let actionSheet = this.actionSheetCtrl.create({
    title: this.translate.instant("translation.path"),
    buttons: buttons
});
actionSheet.present();

Radio inputs in Alert

It looks as if the inputs are shown as normal text inputs, even though they’re a bit shorter than the text inputs are.

let locations = ["Array", "Of", "String", "Locations"];

return new Promise((resolve, reject) => {
    let alert = this.alertCtrl.create({
        title: this.translate.instant("translation.path"),
        buttons: [
            {
                text: this.translate.instant("translation.path.close"),
                handler: data => {
                    reject();
                }
            },
            {
                text: this.translate.instant("translation.path.ok"),
                handler: data => {
                    // Handle 
                    resolve();
                }
            }
        ]
    });

    for(let location of locations) {
        alert.addInput({
            type: 'radio',
            label: location,
            value: location,
            checked: false
        });
    }

    alert.present();
});

Tested on an iPhone 5S iOS 10.2, $ ionic info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: Mac OS X Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Here’s the working versions with iOS CSS in the browser

ActionSheet

Radio buttons

I haven’t been able to find anyone with similar issues Hope someone here can be of help!