Fix mentioned user not clickable after posting or editing a comment

The contactsMenu plugin was called on avatar elements from
_postRenderItem, which is called when a new comment is added to the
collection. Due to this contactsMenu was not called when messages were
edited; when a new comment is posted _postRenderItem is called, but at
that time the "mentions" attribute is not filled yet, so "@username" is
not replaced by avatars in the message and thus contactsMenu has no
avatars to be called on.

Calling contactsMenu was moved to a new method, _postRenderMessage,
which is called from _postRenderItem and from the success callback when
fetching the model in _onSubmitSuccess (which replaces "@username" by
avatars in the message after posting or editing a comment).

Fixes #4555

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 14 insertions, 3 deletions

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index ace0862ad2e..3a20604326b 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -239,8 +239,12 @@
 					username, 0, $el.find('.authorRow'));
 			}
 
-			var message = $el.find('.message');
-			message.find('.avatar').each(function() {
+			var $message = $el.find('.message');
+			this._postRenderMessage($message);
+		},
+
+		_postRenderMessage: function($el) {
+			$el.find('.avatar').each(function() {
 				var avatar = $(this);
 				var strong = $(this).next();
 				var appendTo = $(this).parent();
@@ -419,10 +423,13 @@
 						$textArea.val('').prop('disabled', false);
 					}
 
-					$target.find('.message')
+					var $message = $target.find('.message');
+					$message
 						.html(self._formatMessage(model.get('message'), model.get('mentions')))
 						.find('.avatar')
 						.each(function () { $(this).avatar(); });
+
+					self._postRenderMessage($message);
 				},
 				error: function () {
 					self._onSubmitError($form, commentId);
diff --git a/apps/comments/tests/js/commentstabviewSpec.js b/apps/comments/tests/js/commentstabviewSpec.js
index b991e0d6804..63a27956f9f 100644
--- a/apps/comments/tests/js/commentstabviewSpec.js
+++ b/apps/comments/tests/js/commentstabviewSpec.js
@@ -154,9 +154,11 @@ describe('OCA.Comments.CommentsTabView tests', function() {
 			expect($comment.length).toEqual(1);
 			expect($comment.find('.avatar[data-user=macbeth]').length).toEqual(1);
 			expect($comment.find('strong:first').text()).toEqual('Thane of Cawdor');
+			expect($comment.find('.avatar[data-user=macbeth] ~ .contactsmenu-popover').length).toEqual(1);
 
 			expect($comment.find('.avatar[data-user=banquo]').length).toEqual(1);
 			expect($comment.find('.avatar-name-wrapper:last-child strong').text()).toEqual('Lord Banquo');
+			expect($comment.find('.avatar[data-user=banquo] ~ .contactsmenu-popover').length).toEqual(1);
 		});
 
 	});
@@ -292,6 +294,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
 			expect($message.find('.avatar').length).toEqual(1);
 			expect($message.find('.avatar[data-user=anotheruser]').length).toEqual(1);
 			expect($message.find('.avatar[data-user=anotheruser] ~ strong').text()).toEqual('Another User');
+			expect($message.find('.avatar[data-user=anotheruser] ~ .contactsmenu-popover').length).toEqual(1);
 		});
 		it('does not create a comment if the field is empty', function() {
 			view.$el.find('.message').val('   ');
@@ -502,6 +505,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
 			expect($message.find('.avatar').length).toEqual(1);
 			expect($message.find('.avatar[data-user=anotheruser]').length).toEqual(1);
 			expect($message.find('.avatar[data-user=anotheruser] ~ strong').text()).toEqual('Another User');
+			expect($message.find('.avatar[data-user=anotheruser] ~ .contactsmenu-popover').length).toEqual(1);
 
 			// form row is gone
 			$formRow = view.$el.find('.newCommentRow.comment[data-id=3]');