Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FAB: list not getting active class #8424

Closed
Manduro opened this issue Oct 3, 2016 · 3 comments
Closed

FAB: list not getting active class #8424

Manduro opened this issue Oct 3, 2016 · 3 comments
Assignees

Comments

@Manduro
Copy link
Contributor

Manduro commented Oct 3, 2016

Short description of the problem:

My <ion-fab-list> does not get the .fab-list-active class as it's supposed to when the FAB is clicked. When I interact with another component, the class suddenly IS added to the FAB and the list is shown. Then when I close the FAB the class is not removed from the FAB until I interact with another component.

I'm using ChangeDetectionStrategy.OnPush in the page with the FAB, but setting it to Default does not fix this.

The list is working in the demos, so I'm not sure why it isn't working for me.

Another small problem I noticed while looking at the demos is that the list buttons do not animate out because the .fab-list-active class is removed, making them invisible before they can animate out.

<ion-header>
  <ion-navbar>
    <ion-title>FAB list</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-fab bottom right>
    <button ion-fab>
      <ion-icon name="add"></ion-icon>
    </button>
    <ion-fab-list side="top">
      <button ion-fab>
        <ion-icon name="chatboxes"></ion-icon>
      </button>
      <button ion-fab>
        <ion-icon name="calendar"></ion-icon>
      </button>
    </ion-fab-list>
  </ion-fab>

</ion-content>

Which Ionic Version?
2.0.0-rc.0

Plunker that shows an example of your issue

I can't find a RC.0 compatible plunkr.

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a 
@manucorporat
Copy link
Contributor

manucorporat commented Oct 5, 2016

@Manduro the posted markup is EXACTLY the same you are using? sometimes the bug is in the smallest detail

@Manduro
Copy link
Contributor Author

Manduro commented Oct 6, 2016

@manucorporat Yep, this markup exactly and nothing else on the page! Here's a nice gif to go with it ;). I only added the text input to demo it.

fab-bug

As you can see the class is only added and removed after I interact with the text input. So somehow change detection fails here.

@manucorporat
Copy link
Contributor

I have a possible fix, but I would like to reproduce the bug first (I can't).

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 8, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants