Key item lists to maintain identity across redraws

Fixes #667. This issue was due to the fact that Mithril would change the "Lock" badge into a "Sticky" badge, but the tooltip initialization would not be triggered because it was using the same element. By maintaining element identity, the "Lock" badge will remain untouched, and a new element for the "Sticky" badge will be inserted before it. See https://lhorie.github.io/mithril/mithril.html#dealing-with-focus for more information.

js/lib/components/Badge.js

@@ -24,11 +24,6 @@ export default class Badge extends Component {
     attrs.className = 'Badge ' + (type ? 'Badge--' + type : '') + ' ' + (attrs.className || '');
     attrs.title = extract(attrs, 'label') || '';
 
-    // Give the badge a unique key so that when badges are displayed together,
-    // and then one is added/removed, Mithril will correctly redraw the series
-    // of badges.
-    attrs.key = attrs.type;
-
     return (
       <span {...attrs}>
         {iconName ? icon(iconName, {className: 'Badge-icon'}) : m.trust('&nbsp;')}

js/lib/helpers/listItems.js

@@ -41,7 +41,8 @@ export default function listItems(items) {
             (item.itemName ? 'item-' + item.itemName : ''),
             className,
             (active ? 'active' : '')
-          ])}>
+          ])}
+            key={item.itemName}>
             {item}
           </li>,
       ' '