From 9c628f089792dbbc417a185c5933d6cbcd54dd31 Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nbianca@users.noreply.github.com>
Date: Tue, 21 Jan 2020 18:44:50 +0200
Subject: [PATCH] FIX: Workaround limitation in jquery.autoellipsis (#8747)

Calling $.ellipsis() on an element containing <br> elements would throw
an exception.
---
 .../discourse/components/text-overflow.js.es6 |  1 +
 .../components/text-overflow-test.js.es6      | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 test/javascripts/components/text-overflow-test.js.es6

diff --git a/app/assets/javascripts/discourse/components/text-overflow.js.es6 b/app/assets/javascripts/discourse/components/text-overflow.js.es6
index d5bc066fb02..90a9cc21a27 100644
--- a/app/assets/javascripts/discourse/components/text-overflow.js.es6
+++ b/app/assets/javascripts/discourse/components/text-overflow.js.es6
@@ -7,6 +7,7 @@ export default Component.extend({
       const $this = $(this.element);
 
       if ($this) {
+        $this.find("br").replaceWith(" ");
         $this.find("hr").remove();
         $this.ellipsis();
       }
diff --git a/test/javascripts/components/text-overflow-test.js.es6 b/test/javascripts/components/text-overflow-test.js.es6
new file mode 100644
index 00000000000..dac6d6352cf
--- /dev/null
+++ b/test/javascripts/components/text-overflow-test.js.es6
@@ -0,0 +1,32 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("text-overflow", { integration: true });
+
+componentTest("default", {
+  template: `
+    <style>
+      .overflow {
+        max-height: 40px;
+        overflow: hidden;
+        width: 500px;
+      }
+    </style>
+
+    <div>{{text-overflow class='overflow' text=text}}</div>`,
+
+  beforeEach() {
+    this.set(
+      "text",
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce convallis faucibus tortor quis vestibulum.<br>\nPhasellus pharetra dolor eget imperdiet tempor.<br>\nQuisque hendrerit magna id consectetur rutrum.<br>\nNulla vel tortor leo.<br>\nFusce ullamcorper lacus quis sodales ornare.<br>"
+    );
+  },
+
+  test(assert) {
+    assert.equal(
+      find(".overflow")
+        .text()
+        .trim(),
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce convallis faucibus tortor quis vestibulum. Phasellus pharetra dolor eget imperdiet..."
+    );
+  }
+});