Material: select: used inside of an angular-material-data-table md-cell cause a conflict with click triggering

[Aiyer25]

Actual Behavior:

• What is the issue? * Event triggering is happening on the whole element.
• What is the expected behavior? Event has to trigger only when we click on md-select dropdown

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details:

Angular Versions: *

• Angular Version:
• Angular Material Version:

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[ThomasBurleson]

@Aiyer25 - please provide a CodePen that demonstrates a specific problem.

[vjku]

This is happening when https://github.com/daniel-nagy/md-data-table is used and md-cell is applied to the td element.

CodePen: http://codepen.io/anon/pen/XpWBGj

If there is no md-cell attribute or md-data-table, this issue does not exist. So a quick fix is to remove md-cell attribute and add a md-cell class to the td element if you do not need the click anywhere to select cell functionality of md-data-table but need the UI intact.

[JoshuaWalsh]

@vjku You're a legend, that workaround has fixed my form. Thanks!

[Splaktar]

Updated CodePen for AngularJS Material 1.1.10 and angular-material-data-table 0.10.10 and this issue still remains.

I also forked the CodePen to demonstrate that this does not happen with a regular select element. So this does seem to be specific to AngularJS Material where angular-material-data-table causes a conflict.