Ionic 2 Alert Bug: setCssClass overrides existing css classes

[ch-weiss]

Short description of the problem:

The Alert method setCssClass does not add a cssClass as documented but sets it and overrides existing css classes that have beeen set while creating the Alert (or that have been passed on by Selections)

What behavior are you expecting?

The method works as documented and adds cssClasses without overriding existing ones. Maybe the name of the method should be changed to addCssClass to make things more clear.

Steps to reproduce:

1. Easiest way: Look at the implementation of the Alert method setCssClass
2. Alternatively: Create an Alert with an cssClass given
3. Look ath the Dom. The css class does not appear in the Dom because it gets overriden with the default css classes of an Alert (via the method setCssClass)

Which Ionic Version? 2.x

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[ch-weiss]

Thank you for your interest. I think in this context it makes more sense to have a look at the current implementation of the method setCssClass in Alert which is supposed to add a cssClass but it really sets it instead of adding:

257 /**
258 * @param {string} cssClass CSS class name to add to the alert's outer wrapper
259 */
260 setCssClass(cssClass: string) {
261 this.data.cssClass = cssClass;
262 }

[guillenotfound]

This seems to be fixed by: 215c6d8.

[brandyscarney]

So what I'm seeing with the latest is:

let alert = this.alertCtrl.create({
  title: 'Alert',
  buttons: ['Cancel', 'OK'],
  cssClass: 'my-alert'
});

alert.present(alert);

This creates an alert with the classes: my-alert alert-cmp

and if I call the function to set the class like this:

let alert = this.alertCtrl.create({
  title: 'Alert',
  buttons: ['Cancel', 'OK'],
  cssClass: 'my-alert'
});

alert.setCssClass('custom-alert');
alert.present(alert);

then the following classes are added: custom-alert alert-cmp

I think this function is doing what it should, but maybe you are asking for a function that just adds classes @ch-weiss?

[ch-weiss]

@brandyscarney: Thank you for the explanation. The problem I identified is in the context of selections. Selections offer the possibility to specify a css class parameter which is passed on to the generated alert. I did this but in the dom I did not find the specified css class. So I debugged what happens and found that during alert generation the css class is passed on to the alert. Then the standard alert classes of Ionic are set using the method setCssClass of alert. This setting overrides the css class that came from the selection. When I change the implementation of the method setCssClass to add the css class parameter given to it instead of setting it all works fine and the csss class parameter that comes from the selection is in the dom as well as Ionics standard css class for alerts
So maybe the setCssClass method works as intended and there is an issue in the alert generation from selections. But I did not check yet whether this issue is still there in beta 10.

[brandyscarney]

@ch-weiss Thanks for the description! I'm able to see the problem using selects.

[brandyscarney]

This will be fixed in the beta 11 release. Thanks for the issue!

[ch-weiss]

@brandyscarney Thanks for your attention and to the whole team for the awesome work!