md-fab-speed-dial showing actions when isOpen is false.

[piyushchauhan2011]

EDIT FROM CORE TEAM: This issue has been locked, please refer to #6788 and #6789 as we split it into two issues.

The current screenshot is from the latest material angular website.
I can see in the code that this.isOpen=false but the actions are visible and when we click on button, only after that it triggers the show and hide functionality.
However, in the bottom example it seems to work fine, don't know why ?

Can anyone elaborate on this how to hide on initial load the actions behind the big icon button.

[piyushchauhan2011]

Found that md-fling animation is buggy and makes the fab-speed-dial to remain open initially. Works perfectly in md-scale animation.

[epelc]

@topherfangio This is still broken in 1.0.0(and master) if you run it locally(might have to be outside of the docs demo too).

Also can't really workaround it by using md-scale as #6344 was also introduced when you run it locally.

[trevorade]

Finally figured it out. fabSpeedDial will start out visible if not enclosed with an ng-cloak (either on the md-fab-speed-dial itself or an enclosing ancestor element.)

To repro:

• Open the Basic Usage demo on codepen: https://material.angularjs.org/HEAD/demo/fabSpeedDial
• Remove the ng-cloak="" attribute on the root element.

At this point, the speed dial will start open.

[rudzikdawid]

md-flying in final version 1.0.0 is still broken

[topherfangio]

@trevorade Thanks for the update; you are indeed correct about ng-cloak. This does make for a decent workaround though, just add the ng-cloak to the speed dial itself and it should work.

The base issue here is that with just HTML/CSS, the speed dial uses flex positioning and is thus open "by default". We use JS animations to close it, but those don't always seem to fire as expected. The real solution would be to rewrite it using absolute positioning where the elements start out overlapping/hidden and use the JS animations to reposition it to be open, but I think this may be too big of a change for a 1.0.1, so I'll try to find a different workaround.

In the meantime, can you test adding the ng-cloak and make sure it works for everyone's cases? If so, I'll add a note to the docs until we get this more properly fixed.

[johnsheldon]

Also having this issue, ng-cloak fix worked for one of our speed dials. However, we have another speed dial which is hidden initially using ng-hide, then shown, and when used in conjunction with ng-cloak it causes the action items to be always expanded and invisible, but clickable.

[epelc]

@topherfangio I just tested Adding ng-cloak to md-speeddial in 1.0.0

With md-fling it works perfectly as far as I can tell. Both refreshing while on and navigating to a page with the speeddial works as expected with no close animations playing or it starting out open.

With md-scale the actions start out very tiny as seen in this picture but they instantly animate out and shrink to nothing. It's very noticable but I'll just use ng-cloak with md-fling for now.

[topherfangio]

@epelc Can you test the CSS hack for the md-scale animation that I mentioned in #6344? Should fix the issue for you so you can continue to use that animation.

[epelc]

@topherfangio just did. It fixed it!

[topherfangio]

@johnsheldon Can you provide a Codepen so that I can play around and try to find a quick workaround and then a more robust fix?

[johnsheldon]

@topherfangio sure--

http://codepen.io/johnsheldon/pen/JGGxNv

[topherfangio]

Thanks for the demo; I definitely see the issue.

[Frank3K]

+1

[tonyeung]

+1 spent an entire day trying to debug this. Should have just checked. T.T

[objecteer]

I think the problem was from jqLite. So, I added JQuery to my main page and the problem was solved.

[tonyeung]

@objecteer i have the full version of jquery, also. Without the ng-cloak its still broke.

[tonyeung]

@ThomasBurleson out of curiosity, how do you guys keep track of items where there are plans to fix stuff if you close the issue?

[topherfangio]

@tonyeung Apologies, it looks like a comment I made yesterday never got saved.

I have created two separate issues to track this better: #6788 for the generic issue of requiring ng-cloak and #6789 for the ng-cloak/ng-hide bug. We are planning to track them there.

[tonyeung]

@topherfangio no worries. I thought that maybe you guys had some other workflow other than github issues. If you did, then maybe there's something I can learn from it.

[felipekm]

+1 on that guys!

[matewilk]

yep, +1 too!

[tonyeung]

probably should get this locked and point people to #6788 and #6789 if they want to keep track of progress