ChatScroller: Fix scrollableSelector for iFrames + add force prop (#441)

* ChatScroller: Fix scrollableSelector for iFrames + add force prop

This update resolves the issue where ChatScroller failed to determine the
`document` from the internal `childRef`.

An enhancement was also made that adds a new `forceScrollToBottomProp` prop
which, when changed, forces `ChatScroller` to scroll to the very bottom.

* 2.5.7-beta-0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpscout/hsds-react",
-  "version": "2.5.6",
+  "version": "2.5.7-beta-0",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

src/components/ChatScroller/ChatScroller.tsx

@@ -12,6 +12,7 @@ export interface Props {
   className?: string
   children?: any
   distanceForAutoScroll: number
+  forceScrollToBottomProp: any
   isTyping: boolean
   lastMessageId: string
   messages?: Array<any>
@@ -51,6 +52,11 @@ export class ChatScroller extends React.PureComponent<Props> {
     if (this.shouldScrollOnUpdate(prevProps)) {
       this.autoScrollToLatestMessage()
     }
+    if (
+      prevProps.forceScrollToBottomProp !== this.props.forceScrollToBottomProp
+    ) {
+      this.forceScrollToBottom()
+    }
   }
 
   shouldScrollOnUpdate(prevProps) {
@@ -124,7 +130,7 @@ export class ChatScroller extends React.PureComponent<Props> {
 
   setNodes() {
     this.node = ReactDOM.findDOMNode(this.childRef)
-    this.document = getDocumentFromComponent(this.node)
+    this.document = getDocumentFromComponent(this.childRef) || document
     const innerNode =
       this.node && this.node.querySelector(this.props.scrollableSelector)
     const outerNode = this.document.querySelector(this.props.scrollableSelector)

src/components/ChatScroller/README.md

@@ -12,16 +12,17 @@ A ChatScroller component is light-weight wrapper automatically scrolls a Chat bo
 
 ## Props
 
-| Prop                  | Type          | Description                                            |
-| --------------------- | ------------- | ------------------------------------------------------ |
-| className             | `string`      | Custom class names to be added to the component.       |
-| distanceForAutoScroll | `number`      | A range to enable auto-scrolling.                      |
-| isTyping              | `bool`        | A chat-based event used to trigger auto-scrolling.     |
-| lastMessageId         | `string`      | Chat data used to trigger auto-scrolling.              |
-| messages              | `array`       | Chat data used to trigger auto-scrolling.              |
-| messageSelectors      | `string`      | DOM selector(s) for chat message elements.             |
-| onScroll              | `function`    | Callback function when component is scrolled.          |
-| propsToCheck          | `Array`       | A collection of props to check to initiate the scroll. |
-| scrollableNode        | `HTMLElement` | DOM Element to check for scrolling.                    |
-| scrollableSelector    | `string`      | DOM selector for the scrollable message container.     |
-| smoothScrollDuration  | `number`      | Duration (ms) for smooth scrolling.                    |
+| Prop                    | Type          | Description                                            |
+| ----------------------- | ------------- | ------------------------------------------------------ |
+| className               | `string`      | Custom class names to be added to the component.       |
+| distanceForAutoScroll   | `number`      | A range to enable auto-scrolling.                      |
+| forceScrollToBottomProp | `any`         | Update this prop to force scroll to bottom.            |
+| isTyping                | `bool`        | A chat-based event used to trigger auto-scrolling.     |
+| lastMessageId           | `string`      | Chat data used to trigger auto-scrolling.              |
+| messages                | `array`       | Chat data used to trigger auto-scrolling.              |
+| messageSelectors        | `string`      | DOM selector(s) for chat message elements.             |
+| onScroll                | `function`    | Callback function when component is scrolled.          |
+| propsToCheck            | `Array`       | A collection of props to check to initiate the scroll. |
+| scrollableNode          | `HTMLElement` | DOM Element to check for scrolling.                    |
+| scrollableSelector      | `string`      | DOM selector for the scrollable message container.     |
+| smoothScrollDuration    | `number`      | Duration (ms) for smooth scrolling.                    |

src/components/ChatScroller/__tests__/ChatScroller.test.js

@@ -257,3 +257,26 @@ describe('shouldAutoScroll', () => {
     ).toBe(true)
   })
 })
+
+describe('forceScrollToBottomProp', () => {
+  test('Should attempt to scroll if forceScrollToBottomProp changes', () => {
+    const spy = jest.fn()
+    const wrapper = mount(<ChatScroller forceScrollToBottomProp="one" />)
+    const inst = wrapper.instance()
+    inst.forceScrollToBottom = spy
+
+    expect(spy).not.toHaveBeenCalled()
+
+    wrapper.setProps({ forceScrollToBottomProp: 'two' })
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    wrapper.setProps({ forceScrollToBottomProp: 'three' })
+    expect(spy).toHaveBeenCalledTimes(2)
+
+    wrapper.setProps({ forceScrollToBottomProp: 'one' })
+    expect(spy).toHaveBeenCalledTimes(3)
+
+    wrapper.setProps({ forceScrollToBottomProp: 'one' })
+    expect(spy).toHaveBeenCalledTimes(3)
+  })
+})