virtual-repeat-container: cannot click links when used with <tbody>

[tmjfitch]

Actual Behavior:

• What is the issue? * When including a link in a <td> element using md-virtual-repeat on the <tr> element, and the container is a <tbody> with md-virtual-repeat-container directive, you cannot click the link inside the <td> element. (The cursor doesn't change on hover and clicking the link has no effect.)
• What is the expected behavior? You should be able to click the link in the <a> element to navigate to a new page.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: CodePen showing the problem: https://codepen.io/tomfitch/pen/bWEavr CodePen showing the same functionality working with <div> elements instead of table elements: https://codepen.io/tomfitch/pen/oWbpqN
• Details: Load the codepen and try to click the links in the comments column. In the codepen showing the problem the mouse cursor doesn't change on hover and nothing happens when you click the link.

AngularJS Versions: *

• AngularJS Version: 1.6.4
• AngularJS Material Version: 1.1.0

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 57.0.2987.133 (64-bit)
• OS: * Mac OS X El Capitan 10.11.6
• Stack Traces:

[tmjfitch]

As a workaround, styling the <td> containing the link position: relative makes it clickable.

CodePen with workaround: https://codepen.io/tomfitch/pen/ZKQMqm

[kenielsen]

This also happens when you have ng-click on the rows or cells. Also any other css targeted at the rows/cells does not work.

[Splaktar]

This is still an issue in 1.1.8 (updated CodePen).

Thank you for the report and the workaround!

[Splaktar]

While the md-virtual-repeat-container directive uses the default restrict property (EA), the comments in the code indicate that it should only be used as an element (@restrict E). All of the documentation gives examples of it being used as an Element as well. That seems to be part of the problem here.

In this updated CodePen you can see that I've pulled the <md-virtual-repeat-container> out into an Element and this seems to render the cells properly (clickable).

I'm tempted to go in and add restrict: 'E', to the directive, but I think that may be a breaking change for too many people.

I'm going to leave this open as a documentation effort. We should consider updating https://material.angularjs.org/latest/api/directive/mdVirtualRepeatContainer to include a statement about how it should be used as an Element.