ng-if breaks inherit-select-classes

[timcosta]

as of 1.3.0, the inherit-select-classes="true" attribute no longer appears to be working.

[leocaseiro]

Hi @tjsail33, thanks for reporting this issue,

Actually most of the chosen attributes are not working.

I believe that was @vstene changes on this PR #128

I'll redo tonight and release a hotfix.

[timcosta]

Thank you!

[leocaseiro]

Hi @tjsail33, actually It's working fine.

I've even wrote some unit testing to verify the inheritance classes and it's work just fine!

PS: I realized that we need to have ngModel to work...

Check my plunkr: http://plnkr.co/edit/Awq2Ze?p=preview

[timcosta]

Hi @leocaseiro

Thanks for looking into this so quickly. I looked at the Plunkr, and it appear that your second chosen is NOT inheriting from the select as I would have expected. There is a red class on the select, but not on the generated chosen-container. Are you seeing the same?

[leocaseiro]

Sorry, what browser are you checking it?

I'm at Chrome 49.0.2623.87 on OSX El capitan 10.11.3 and it does, check it out. Now I'm using a class called mycustomredclass:

[timcosta]

Here's what I'm seeing...

Chrome Version 49.0.2623.87 (64-bit)
OS X 10.10.5

[leocaseiro]

Exactly, as I said, it doesn't work without a ngModel, set a ng-model and you'll see that works.

[timcosta]

Sorry, missed that. Here's where I am seeing the issue though:

It has an ng-model, but form-group__input is not being copied over.

[leocaseiro]

Hi @tjsail33 could you please tell me a little more about your scenario?

I've noticed that you have disabled="disabled", what else do you have in your settings before run the app?

Could you please copy your select settings for me?

I guess something like:

<select chosen ng-disabled="true" inherit-select-classes="true">...</select>

[timcosta]

Here's the jade snippet that creates the select:

select.form-group__input(name="eligibleRoles", chosen, multiple, ng-options="role.id as role.display_name for role in userCreateEditCtrl.roles.roles", ng-model="userCreateEditCtrl.currentRoles", inherit-select-classes="true")

and the compiled HTML:

<select name="eligibleRoles" chosen="chosen" multiple="multiple" ng-options="role.id as role.display_name for role in userCreateEditCtrl.roles.roles" ng-model="userCreateEditCtrl.currentRoles" inherit-select-classes="true" class="form-group__input"></select>

[leocaseiro]

It's weird, but it's working for me. Maybe something with the ng-options way....

How about chosen and angular version?

chosen 1.4.2?
angular 1.5.0?

http://plnkr.co/edit/3tnKoW?p=preview

Sorry, but I'm really struggling to emulate this issue. I'll have to look tonight(Australia)

[leocaseiro]

Hi @tjsail33 I did some more tests and I realized this happens while I set ng-if in my select. Are you doing some ng-if in it's parent or something like that?

http://plnkr.co/edit/WQhgCQ?p=preview

switch from ng-if to ng-hide worked. Probably I need to wait until ng-if to compile...

[timcosta]

Yes, there's an NG if on the parent.

Sent from my iPhone

On Mar 17, 2016, at 8:59 PM, Leo Caseiro notifications@github.com wrote:

Hi @tjsail33 I did some more tests and I realized this happens while I set ng-if in my select. Are you doing some ng-if in it's parent or something like that?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[leocaseiro]

Please, for the time being, are you able to use ng-hide or ng-show instead?
I'll work on a fix this weekend.

[timcosta]

@leocaseiro i'll double check in the AM to confirm that ng-if causes the issue.

[leocaseiro]

Hi @tjsail33, I think I found a fix for your issue, but I broke all the unit tests.

Did ng-hide works for you?

For the time being I'm keeping at the branch 176-ng-if-breaks-inherit-select-classes

[loren138]

For the sake of voicing it, I'm having this same issue except with the width variable. I'm also using an ng-if. During the full page load it doesn't work, but if I make the ng-if false and then true again it seems to get caught in the rebuild. I guess the difference must be the order the JS gets run in those two scenarios sometimes it builds first and sometimes it doesn't. I'm using the ng-if so that the select isn't required while it is hidden (and to prevent from building a bunch of extra selects).

[leocaseiro]

@loren138, is your scenario similar the one I added at the bottom in my example, right?

Would this branch resolve your issue?

Can you please try one of those files: /176-ng-if-breaks-inherit-select-classes/dist

[loren138]

Yes and yes. The dist file you linked to fixes the problem.

[leocaseiro]

Thanks!
I'm just waiting the confirmation another contributor about our unit testing and I'll release this fix.

Here is a plunker http://plnkr.co/edit/3tnKoW?p=preview with ng-if inside select and also it's parent.

[leocaseiro]

Fixed on 1.4.0 release