Fix scrollbar thumb crashing in React@next (v19) (#718)

Also fixes a scrollbar UI bug where the scrollbar thumb appears to always be in an active state even after finishing scrolling.

Author: pradeepnschrodinger

src/css/layout/ScrollbarLayout.css

@@ -27,23 +27,18 @@
 .ScrollbarLayout/mainHorizontal {
   height: var(--scrollbar-size);
   left: 0;
-  transition-property: background-color height;
-}
-
-/* Touching the scroll-track directly makes the scroll-track bolder */
-.ScrollbarLayout/mainHorizontal.public/Scrollbar/mainActive,
-.ScrollbarLayout/mainHorizontal:hover {
-  height: var(--scrollbar-size-large);
 }
 
 .ScrollbarLayout/face {
   left: 0;
   overflow: hidden;
   position: absolute;
   z-index: 1;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
-  transition-property: width;
+
+  /* keep the thumb aligned to the center */
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 /**
@@ -57,7 +52,9 @@
   content: '';
   display: block;
   position: absolute;
-  transition: background-color 250ms ease;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+  transition-property: background-color, height, width;
 }
 
 .ScrollbarLayout/faceHorizontal {
@@ -67,10 +64,8 @@
 }
 
 .ScrollbarLayout/faceHorizontal:after {
-  bottom: var(--scrollbar-face-margin);
-  left: 0;
-  top: var(--scrollbar-face-margin);
   width: 100%;
+  height: calc(100% - var(--scrollbar-face-margin) * 2);
 }
 
 .fixedDataTable_isRTL .ScrollbarLayout/faceHorizontal,
@@ -79,9 +74,10 @@
   left: auto;
 }
 
+/* expand horizontal scrollbar face when active */
 .ScrollbarLayout/faceHorizontal.public/Scrollbar/faceActive:after,
 .ScrollbarLayout/main:hover .ScrollbarLayout/faceHorizontal:after {
-  bottom: calc(var(--scrollbar-face-margin)/2);
+  height: calc(100% - var(--scrollbar-face-margin));
 }
 
 .ScrollbarLayout/faceVertical {
@@ -92,13 +88,11 @@
 
 .ScrollbarLayout/faceVertical:after {
   height: 100%;
-  left: var(--scrollbar-face-margin);
-  right: var(--scrollbar-face-margin);
-  top: 0;
+  width: calc(100% - var(--scrollbar-face-margin) * 2);
 }
 
+/* expand veritcal scrollbar face when active */
 .ScrollbarLayout/main:hover .ScrollbarLayout/faceVertical:after,
 .ScrollbarLayout/faceVertical.public/Scrollbar/faceActive:after {
-  left: calc(var(--scrollbar-face-margin)/2);
-  right: calc(var(--scrollbar-face-margin)/2);
+  width: calc(100% - var(--scrollbar-face-margin));
 }

src/plugins/Scrollbar.js

@@ -33,8 +33,6 @@ const FACE_MARGIN_2 = FACE_MARGIN * 2;
 const FACE_SIZE_MIN = 30;
 const KEYBOARD_SCROLL_AMOUNT = 40;
 
-let _lastScrolledScrollbar = null;
-
 class Scrollbar extends React.PureComponent {
   static propTypes = {
     contentSize: PropTypes.number.isRequired,
@@ -110,7 +108,7 @@ class Scrollbar extends React.PureComponent {
     let faceStyle;
     const isHorizontal = this.state.isHorizontal;
     const isVertical = !isHorizontal;
-    const isActive = this.state.focused || this.state.isDragging;
+    const isActive = this.state.isDragging;
     const faceSize = this.state.faceSize;
     const isOpaque = this.props.isOpaque;
     const verticalTop = this.props.verticalTop || 0;
@@ -182,8 +180,6 @@ class Scrollbar extends React.PureComponent {
 
     return (
       <div
-        onFocus={this._onFocus}
-        onBlur={this._onBlur}
         onKeyDown={this._onKeyDown}
         onMouseDown={this._onMouseDown}
         onTouchCancel={this._onTouchCancel}
@@ -244,9 +240,6 @@ class Scrollbar extends React.PureComponent {
       this._mouseMoveTracker.releaseMouseMoves();
       this._mouseMoveTracker = null;
     }
-    if (_lastScrolledScrollbar === this) {
-      _lastScrolledScrollbar = null;
-    }
   }
 
   scrollBy = (/*number*/ delta) => {
@@ -313,15 +306,10 @@ class Scrollbar extends React.PureComponent {
       position = maxPosition;
     }
 
-    const isDragging = this._mouseMoveTracker
-      ? this._mouseMoveTracker.isDragging()
-      : false;
-
     // This function should only return flat values that can be compared quiclky
     // by `ReactComponentWithPureRenderMixin`.
     const state = {
       faceSize,
-      isDragging,
       isHorizontal,
       position,
       scale,
@@ -358,6 +346,8 @@ class Scrollbar extends React.PureComponent {
   };
 
   _onMouseDown = (/*object*/ event) => {
+    this.setState({ isDragging: true });
+
     /** @type {object} */
     let nextState;
 
@@ -387,7 +377,6 @@ class Scrollbar extends React.PureComponent {
       nextState = {};
     }
 
-    nextState.focused = true;
     this._setNextState(nextState);
 
     this._mouseMoveTracker.captureMouseMoves(event);
@@ -535,32 +524,6 @@ class Scrollbar extends React.PureComponent {
     );
   };
 
-  _onFocus = () => {
-    this.setState({
-      focused: true,
-    });
-  };
-
-  _onBlur = () => {
-    this.setState({
-      focused: false,
-    });
-  };
-
-  _blur = () => {
-    const el = ReactDOM.findDOMNode(this);
-    if (!el) {
-      return;
-    }
-
-    try {
-      this._onBlur();
-      el.blur();
-    } catch (oops) {
-      // pass
-    }
-  };
-
   getTouchX = (/*object*/ e) => {
     return Math.round(
       e.targetTouches[0].clientX - e.target.getBoundingClientRect().x
@@ -593,11 +556,6 @@ class Scrollbar extends React.PureComponent {
       }
       return;
     }
-
-    if (willScroll && _lastScrolledScrollbar !== this) {
-      _lastScrolledScrollbar && _lastScrolledScrollbar._blur();
-      _lastScrolledScrollbar = this;
-    }
   };
 
   _didScroll = () => {

src/stubs/cssVar.js

@@ -19,7 +19,6 @@ const CSS_VARS = {
   '--scrollbar-face-margin': '4px',
   '--scrollbar-face-radius': '6px',
   '--scrollbar-size': '15px',
-  '--scrollbar-size-large': '17px',
   '--scrollbar-track-color': '#fff',
   '--border-color': '#d3d3d3',
   '--fbui-white': '#fff',