In <ContactPills>, use new "scrollToBottom" helper

ts/components/ContactPills.tsx

@@ -9,6 +9,8 @@ import React, {
   ReactNode,
 } from 'react';
 
+import { scrollToBottom } from '../util/scrollToBottom';
+
 type PropsType = {
   children?: ReactNode;
 };
@@ -24,10 +26,9 @@ export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
   useEffect(() => {
     const hasAddedNewChild = childCount > previousChildCount;
     const el = elRef.current;
-    if (!hasAddedNewChild || !el) {
-      return;
+    if (hasAddedNewChild && el) {
+      scrollToBottom(el);
     }
-    el.scrollTop = el.scrollHeight;
   }, [childCount, previousChildCount]);
 
   return (

ts/test-electron/scrollToBottom_test.ts

@@ -0,0 +1,47 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { assert } from 'chai';
+
+import { scrollToBottom } from '../util/scrollToBottom';
+
+describe('scrollToBottom', () => {
+  let sandbox: HTMLDivElement;
+
+  beforeEach(() => {
+    sandbox = document.createElement('div');
+    document.body.appendChild(sandbox);
+  });
+
+  afterEach(() => {
+    sandbox.remove();
+  });
+
+  it("sets the element's scrollTop to the element's scrollHeight", () => {
+    const el = document.createElement('div');
+    el.innerText = 'a'.repeat(50000);
+    Object.assign(el.style, {
+      height: '50px',
+      overflow: 'scroll',
+      whiteSpace: 'wrap',
+      width: '100px',
+      wordBreak: 'break-word',
+    });
+    sandbox.appendChild(el);
+
+    assert.strictEqual(
+      el.scrollTop,
+      0,
+      'Test is not set up correctly. Element is already scrolled'
+    );
+    assert.isAtLeast(
+      el.scrollHeight,
+      50,
+      'Test is not set up correctly. scrollHeight is too low'
+    );
+
+    scrollToBottom(el);
+
+    assert.isAtLeast(el.scrollTop, el.scrollHeight - 50);
+  });
+});

ts/util/lint/exceptions.json

@@ -14671,7 +14671,7 @@
     "rule": "React-useRef",
     "path": "ts/components/ContactPills.js",
     "line": "    const elRef = react_1.useRef(null);",
-    "lineNumber": 27,
+    "lineNumber": 28,
     "reasonCategory": "usageTrusted",
     "updated": "2021-03-01T18:34:36.638Z",
     "reasonDetail": "Used for scrolling. Doesn't otherwise manipulate the DOM"
@@ -14680,7 +14680,7 @@
     "rule": "React-useRef",
     "path": "ts/components/ContactPills.js",
     "line": "    const previousChildCountRef = react_1.useRef(childCount);",
-    "lineNumber": 29,
+    "lineNumber": 30,
     "reasonCategory": "usageTrusted",
     "updated": "2021-03-01T18:34:36.638Z",
     "reasonDetail": "Doesn't reference the DOM. Refers to a number"
@@ -15394,4 +15394,4 @@
     "updated": "2021-01-08T15:46:32.143Z",
     "reasonDetail": "Doesn't manipulate the DOM. This is just a function."
   }
-]
+]

ts/util/scrollToBottom.ts

@@ -0,0 +1,8 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export function scrollToBottom(el: HTMLElement): void {
+  // We want to mutate the parameter here.
+  // eslint-disable-next-line no-param-reassign
+  el.scrollTop = el.scrollHeight;
+}