diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js index 80d026ef..7ad281f3 100644 --- a/client/js/socket-events/msg.js +++ b/client/js/socket-events/msg.js @@ -70,12 +70,25 @@ function processReceivedMessage(data) { notifyMessage(targetId, channel, data); - const lastVisible = container.find("div:visible").last(); + let shouldMoveMarker = data.msg.self; - if (data.msg.self - || lastVisible.hasClass("unread-marker") - || (lastVisible.hasClass("date-marker") - && lastVisible.prev().hasClass("unread-marker"))) { + if (!shouldMoveMarker) { + const lastChild = container.children().last(); + + // If last element is hidden (e.g. hidden status messages) check the element before it. + // If it's unread marker or date marker, then move unread marker to the bottom + // so that it isn't displayed as the last element in chat. + // display properly is checked instead of using `:hidden` selector because it doesn't work in non-active channels. + if (lastChild.css("display") === "none") { + const prevChild = lastChild.prev(); + + shouldMoveMarker = + prevChild.hasClass("unread-marker") || + (prevChild.hasClass("date-marker") && prevChild.prev().hasClass("unread-marker")); + } + } + + if (shouldMoveMarker) { container .find(".unread-marker") .data("unread-id", 0)