search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

subheader: causes child attribute directives to be linked twice #11865

Open codymikol opened 4 years ago

codymikol commented 4 years ago

Bug, enhancement request, or proposal:

CodePen and steps to reproduce the issue:

Link Error Example which demonstrates the issue:

Detailed Reproduction Steps:

  1. Create an md-subheader with a child div that has an attribute directive

What is the expected behavior?

The div will be transcluded once and then its attribute directives will be linked once

What is the current behavior?

It seems that the div is transcluded twice and then one of those transclusions is immediately removed from the DOM without triggering a $destroy event.

What is the use-case or motivation for changing an existing behavior?

This can cause event bindings via attribute directives to be fired tiwce.

Which versions of AngularJS, Material, OS, and browsers are affected?

Currently on 1.1.21

Is there anything else we should know? Stack Traces, Screenshots, etc.

Strangely, the $destroy event is called when the actual transcluded element is destroyed, so this doesn't leave any orphaned event bindings if your own $destroy events are set up properly.

codymikol commented 4 years ago

I'll probably dig a little be deeper into the internals of this today as this currently impacts me directly, just wanted to properly track the issue somewhere.

codymikol commented 4 years ago

It seems to make a cloned element for the "sticky" functionality.

Splaktar commented 4 years ago

It looks like class="md-no-sticky" as mentioned in https://material.angularjs.org/latest/api/directive/mdSubheader causes the linking to only happen once.

Splaktar commented 4 years ago

The doc also mentions:

Whenever the current browser doesn't support stickiness natively, the subheader will be compiled twice to create a sticky clone of the subheader.

So it seems like this is somewhat expected?

Though I'm surprised that it is doing this cloning on Chrome 80 based on https://caniuse.com/#feat=css-sticky.

Splaktar commented 4 years ago

https://github.com/angular/material/issues/9361 claims that we can solve the double compilation by re-designing the $mdSticky service, but I'm doubtful that will ever happen.