Update ListCollection with clickFirstAnchor action

Author: kaxcode

ui-v2/app/components/list-collection/index.hbs

@@ -1,6 +1,6 @@
 <EmberNativeScrollable @tagName="ul" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
     <li></li>
     {{~#each _cells as |cell|~}}
-      <li style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
+      <li onclick={{action 'click'}} style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
     {{~/each~}}
 </EmberNativeScrollable>

ui-v2/app/components/list-collection/index.js

@@ -45,4 +45,9 @@ export default Component.extend(WithResizing, {
       this.updateScrollPosition();
     }
   },
+  actions: {
+    click: function(e) {
+      return this.dom.clickFirstAnchor(e, 'li');
+    },
+  },
 });

ui-v2/app/utils/dom/click-first-anchor.js

@@ -14,7 +14,11 @@ const clickEvent = function($el) {
 export default function(closest, click = clickEvent) {
   // TODO: Decide whether we should use `e` for ease
   // or `target`/`el`
-  return function(e) {
+  // TODO: currently, using a string stopElement to tell the func
+  // where to stop looking and currenlty default is 'tr' because
+  // it's backwards compatible.
+  // Long-term this func shouldn't default to 'tr'
+  return function(e, stopElement = 'tr') {
     // click on row functionality
     // so if you click the actual row but not a link
     // find the first link and fire that instead
@@ -26,9 +30,7 @@ export default function(closest, click = clickEvent) {
       case 'button':
         return;
     }
-    // TODO: why should this be restricted to a tr
-    // closest should probably be relaced with a finder function
-    const $a = closest('tr', e.target).querySelector('a');
+    const $a = closest(stopElement, e.target).querySelector('a');
     if ($a) {
       click($a);
     }