Fix post header items sometimes getting out of order. closes flarum/core#975

Interesting bug. Turns out that the JSX for the post header item list was producing m('ul', null, [children]), as you would expect. But Mithril 0.1.x interprets the null as another child rather than an attributes splat. This results in an empty text node being added to the DOM, which mucks up Mithril's diffing algorithm when it tries to add/move the items that we provide in the children array. The workaround is to not use JSX so we can get rid of that null/empty text node. This behaviour has been fixed in Mithril 1.0 so we will be able to remove the workaround.

js/admin/dist/app.js

@@ -21358,12 +21358,12 @@ System.register('flarum/helpers/listItems', ['flarum/components/Separator', 'fla
         item.attrs.key = item.attrs.key || item.itemName;
       }
 
-      return [isListItem ? item : m(
+      return isListItem ? item : m(
         'li',
         { className: classList([item.itemName ? 'item-' + item.itemName : '', className, active ? 'active' : '']),
           key: item.itemName },
         item
-      )];
+      );
     });
   }
 

js/forum/dist/app.js

@@ -19714,14 +19714,13 @@ System.register('flarum/components/CommentPost', ['flarum/components/Post', 'fla
         }, {
           key: 'content',
           value: function content() {
+            // Note: we avoid using JSX for the <ul> below because it results in some
+            // weirdness in Mithril.js 0.1.x (see flarum/core#975). This workaround can
+            // be reverted when we upgrade to Mithril 1.0.
             return babelHelpers.get(Object.getPrototypeOf(CommentPost.prototype), 'content', this).call(this).concat([m(
               'header',
               { className: 'Post-header' },
-              m(
-                'ul',
-                null,
-                listItems(this.headerItems().toArray())
-              )
+              m('ul', listItems(this.headerItems().toArray()))
             ), m(
               'div',
               { className: 'Post-body' },
@@ -28598,12 +28597,12 @@ System.register('flarum/helpers/listItems', ['flarum/components/Separator', 'fla
         item.attrs.key = item.attrs.key || item.itemName;
       }
 
-      return [isListItem ? item : m(
+      return isListItem ? item : m(
         'li',
         { className: classList([item.itemName ? 'item-' + item.itemName : '', className, active ? 'active' : '']),
           key: item.itemName },
         item
-      )];
+      );
     });
   }
 

js/forum/src/components/CommentPost.js

@@ -41,8 +41,11 @@ export default class CommentPost extends Post {
   }
 
   content() {
+    // Note: we avoid using JSX for the <ul> below because it results in some
+    // weirdness in Mithril.js 0.1.x (see flarum/core#975). This workaround can
+    // be reverted when we upgrade to Mithril 1.0.
     return super.content().concat([
-      <header className="Post-header"><ul>{listItems(this.headerItems().toArray())}</ul></header>,
+      <header className="Post-header">{m('ul', listItems(this.headerItems().toArray()))}</header>,
       <div className="Post-body">
         {this.isEditing()
           ? <div className="Post-preview" config={this.configPreview.bind(this)}/>

js/lib/helpers/listItems.js

@@ -39,17 +39,15 @@ export default function listItems(items) {
       item.attrs.key = item.attrs.key || item.itemName;
     }
 
-    return [
-      isListItem
-        ? item
-        : <li className={classList([
-            (item.itemName ? 'item-' + item.itemName : ''),
-            className,
-            (active ? 'active' : '')
-          ])}
-            key={item.itemName}>
-            {item}
-          </li>
-    ];
+    return isListItem
+      ? item
+      : <li className={classList([
+          (item.itemName ? 'item-' + item.itemName : ''),
+          className,
+          (active ? 'active' : '')
+        ])}
+          key={item.itemName}>
+          {item}
+        </li>;
   });
 }