FIX: hand-crafted mention link creates invisible div

app/assets/javascripts/discourse/controllers/user-card.js.es6

@@ -71,10 +71,13 @@ export default ObjectController.extend({
     this.setProperties({ user: null, userLoading: username, cardTarget: target });
 
     var self = this;
-    Discourse.User.findByUsername(username, {stats: false}).then(function (user) {
+    return Discourse.User.findByUsername(username, { stats: false }).then(function(user) {
       user = Discourse.User.create(user);
       self.setProperties({ user: user, avatar: user, visible: true});
       self.appEvents.trigger('usercard:shown');
+    }).catch(function(error) {
+      self.close();
+      throw error;
     }).finally(function() {
       self.set('userLoading', null);
     });

app/assets/javascripts/discourse/views/user-card.js.es6

@@ -2,7 +2,7 @@ import CleansUp from 'discourse/mixins/cleans-up';
 
 import afterTransition from 'discourse/lib/after-transition';
 
-var clickOutsideEventName = "mousedown.outside-user-card",
+const clickOutsideEventName = "mousedown.outside-user-card",
       clickDataExpand = "click.discourse-user-card",
       clickMention = "click.discourse-user-mention";
 
@@ -12,11 +12,11 @@ export default Discourse.View.extend(CleansUp, {
   allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'),
 
   addBackground: function() {
-    var url = this.get('controller.user.card_background');
+    const url = this.get('controller.user.card_background');
 
     if (!this.get('allowBackgrounds')) { return; }
 
-    var $this = this.$();
+    const $this = this.$();
     if (!$this) { return; }
 
     if (Ember.isEmpty(url)) {
@@ -27,17 +27,14 @@ export default Discourse.View.extend(CleansUp, {
   }.observes('controller.user.card_background'),
 
   _setup: function() {
-    var self = this;
+    const self = this;
 
-    afterTransition(self.$(), function() {
-      if (!self.get('controller.visible')) {
-        self.$().css({ left: -9999, top: -9999 });
-      }
-    });
+    afterTransition(self.$(), this._hide.bind(this));
 
-    $('html').off(clickOutsideEventName).on(clickOutsideEventName, function(e) {
+    $('html').off(clickOutsideEventName)
+             .on(clickOutsideEventName, function(e) {
       if (self.get('controller.visible')) {
-        var $target = $(e.target);
+        const $target = $(e.target);
         if ($target.closest('[data-user-card]').data('userCard') ||
             $target.closest('a.mention').length > 0 ||
             $target.closest('#user-card').length > 0) {
@@ -51,46 +48,48 @@ export default Discourse.View.extend(CleansUp, {
     });
 
     var expand = function(username, $target){
-      var postId = $target.parents('article').data('post-id');
+      const postId = $target.parents('article').data('post-id');
+      self.get('controller')
+          .show(username, postId, $target[0])
+          .then(function() {
             self._willShow($target);
-      self.get('controller').show(username, postId, $target[0]);
+          }).catch(function() {
+            self._hide();
+          });
       return false;
     };
 
     $('#main-outlet').on(clickDataExpand, '[data-user-card]', function(e) {
-      var $target = $(e.currentTarget);
-      var username = $target.data('user-card');
+      const $target = $(e.currentTarget),
+            username = $target.data('user-card');
       return expand(username, $target);
     });
 
     $('#main-outlet').on(clickMention, 'a.mention', function(e) {
-      var $target = $(e.target);
-      var username = $target.text().replace(/^@/, '');
+      const $target = $(e.target),
+            username = $target.text().replace(/^@/, '');
       return expand(username, $target);
     });
 
     this.appEvents.on('usercard:shown', this, '_shown');
   }.on('didInsertElement'),
 
-  _shown: function() {
-    var self = this;
+  _shown() {
     // After the card is shown, focus on the first link
-    Ember.run.scheduleOnce('afterRender', function() {
-      self.$('a:first').focus();
-    });
+    Ember.run.scheduleOnce('afterRender', () => this.$('a:first').focus() );
   },
 
-  _willShow: function(target) {
+  _willShow(target) {
     if (!target) { return; }
-    var self = this,
+    const self = this,
           width = this.$().width();
     Em.run.schedule('afterRender', function() {
       if (target) {
-        var position = target.offset();
+        let position = target.offset();
         if (position) {
           position.left += target.width() + 10;
 
-          var overage = ($(window).width() - 50) - (position.left + width);
+          const overage = ($(window).width() - 50) - (position.left + width);
           if (overage < 0) {
             position.left += overage;
             position.top += target.height() + 8;
@@ -103,14 +102,21 @@ export default Discourse.View.extend(CleansUp, {
     });
   },
 
-  cleanUp: function() {
+  _hide() {
+    if (!this.get('controller.visible')) {
+      this.$().css({ left: -9999, top: -9999 });
+    }
+  },
+
+  cleanUp() {
     this.get('controller').close();
   },
 
   _removeEvents: function() {
     $('html').off(clickOutsideEventName);
-    $('#main').off(clickDataExpand);
-    $('#main').off(clickMention);
+
+    $('#main').off(clickDataExpand)
+              .off(clickMention);
 
     this.appEvents.off('usercard:shown', this, '_shown');
   }.on('willDestroyElement')