From 324fa64191ed3c3d4ef6cf86493b627aa51859e9 Mon Sep 17 00:00:00 2001
From: Yair Even Or <Yair.Even-Or@amdocs.com>
Date: Tue, 7 Jun 2022 20:01:40 +0300
Subject: [PATCH] Should also compare prev & next events for `clientHeight` &
 `clientWidth` as they might also change

---
 src/components/Scrollable/Scrollable.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Scrollable/Scrollable.jsx b/src/components/Scrollable/Scrollable.jsx
index 1de1f9c..94126c9 100644
--- a/src/components/Scrollable/Scrollable.jsx
+++ b/src/components/Scrollable/Scrollable.jsx
@@ -115,7 +115,9 @@ export default class Scrollable extends React.PureComponent {
 
         const nextEvent = this.event.next,
             prevEvent = this.event.prev,
-            changed = nextEvent.scrollHeight !== prevEvent.scrollHeight ||
+            changed = nextEvent.clientHeight !== prevEvent.clientHeight ||
+                      nextEvent.scrollHeight !== prevEvent.scrollHeight ||
+                      nextEvent.clientWidth !== prevEvent.clientWidth ||
                       nextEvent.scrollWidth !== prevEvent.scrollWidth ||
                       nextEvent.top !== prevEvent.top ||
                       nextEvent.left !== prevEvent.left;
@@ -167,14 +169,16 @@ export default class Scrollable extends React.PureComponent {
     };
 
     render() {
-        const {children, element, className} = this.props;
+        // (props should not contain ilegal HTML attributes)
+        // eslint-disable-next-line no-unused-vars
+        const {children, element, className, cssVarsOnTracks, scrollOnDOMChange, onUpdate, ...props} = this.props;
         const vsb = findChildByType(children, VerticalScrollbarPlaceholder);
         const hsb = findChildByType(children, HorizontalScrollbarPlaceholder);
         const content = React.Children.toArray(children).filter(child => ![VerticalScrollbarPlaceholder, HorizontalScrollbarPlaceholder].includes(child.type));
 
         return (
             <ResizeObserver onResize={this.updateScrollbars}>
-                <div {...this.props} className={classNames('scrollable', className)} onTransitionEnd={this.handleOnTransitionEnd}>
+                <div {...props} className={classNames('scrollable', className)} onTransitionEnd={this.handleOnTransitionEnd}>
                     {React.cloneElement(element, this.getElementProps(), content)}
                     <Context.Provider value={this.state}>
                         {vsb ? vsb.props.children : <VerticalScrollbar/>}