reorder-list: outline of <li> shows checkboxes from other <li> during drag in Safari

[chalin]

To reproduce:

• Use stagehand (or WebStorm) to create the example AngularDart project.

• Update the pubspec to use angular_components: ^0.7.0.

• In lib/src/todo_list/todo_list_component.dart:

  • Wrap the <li> element in a <reorder-list>
  • Add reorderItem to the <li>

  It should end up looking like this:

<reorder-list (reorder)="onReorder($event)">
  <li *ngFor="..." reorderItem>
    ...
  </li>
 </reorder-list>

• Open the app in Safari.

• Create a few items, mark some as done, then move some around.

Here is an example. Notice how dragging item "a" shows not only the "a" item line being moved, but it also shows the checkboxes of items "b" and "c".

cc @kwalrath

[kwalrath]

Per the internal bug, this component probably shouldn't have been open sourced, as there are known limitations. It isn't to material spec, and doesn't work on mobile.

See also #19.

[chalin]

@nshahan - could you add a help wanted label to this issue?

[nshahan]

I'm reluctant to actively request help on an issue without having some tests available to run externally. It just doesn't make for a productive development process and creates extra work to validate the changes don't break existing test we have internally. We are getting closer and I hope to have at least a proof of concept for tests running externally this Q.

[chalin]

SGTM