Skip to content

FAB: list not getting active class #8424

@Manduro

Description

@Manduro

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 

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions