fix(Modal): Account for body padding when scrollbar is present (reactstrap#165)

Author: eddywashere

src/Modal.js

@@ -3,6 +3,11 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import TransitionGroup from 'react-addons-transition-group';
 import Fade from './Fade';
+import {
+  getOriginalBodyPadding,
+  conditionallyUpdateScrollbar,
+  setScrollbarWidth
+} from './utils';
 
 const propTypes = {
   isOpen: PropTypes.bool,
@@ -29,6 +34,8 @@ class Modal extends React.Component {
   constructor(props) {
     super(props);
 
+    this.originalBodyPadding = null;
+    this.isBodyOverflowing = false;
     this.togglePortal = this.togglePortal.bind(this);
     this.handleBackdropClick = this.handleBackdropClick.bind(this);
     this.handleEscape = this.handleEscape.bind(this);
@@ -105,6 +112,7 @@ class Modal extends React.Component {
     }
 
     document.body.className = classNames(classes).trim();
+    setScrollbarWidth(this.originalBodyPadding);
   }
 
   hide() {
@@ -115,6 +123,9 @@ class Modal extends React.Component {
     const classes = document.body.className;
     this._element = document.createElement('div');
     this._element.setAttribute('tabindex', '-1');
+    this.originalBodyPadding = getOriginalBodyPadding();
+
+    conditionallyUpdateScrollbar();
 
     document.body.appendChild(this._element);
 

src/__tests__/utils.spec.js

@@ -113,4 +113,42 @@ describe('Utils', () => {
       expect(Utils.getTetherAttachments('left bottom')).toEqual(expectedConfig);
     });
   });
+
+  // TODO
+  // describe('getScrollbarWidth', () => {
+  //   // jsdom workaround https://github.com/tmpvar/jsdom/issues/135#issuecomment-68191941
+  //   Object.defineProperties(window.HTMLElement.prototype, {
+  //     offsetLeft: {
+  //       get: function () { return parseFloat(window.getComputedStyle(this).marginLeft) || 0; }
+  //     },
+  //     offsetTop: {
+  //       get: function () { return parseFloat(window.getComputedStyle(this).marginTop) || 0; }
+  //     },
+  //     offsetHeight: {
+  //       get: function () { return parseFloat(window.getComputedStyle(this).height) || 0; }
+  //     },
+  //     offsetWidth: {
+  //       get: function () { return parseFloat(window.getComputedStyle(this).width) || 0; }
+  //     }
+  //   });
+  //
+  //   it('should return scrollbarWidth', () => {
+  //     expect(Utils.getScrollbarWidth()).toBe();
+  //   });
+  // });
+
+  // TODO verify setScrollbarWidth is called with values when body overflows
+  // it('should conditionallyUpdateScrollbar when isBodyOverflowing is true', () => {
+  //   const stubbedSetScrollbarWidth = jasmine.createSpy('Utils', setScrollbarWidth).and.callThrough();
+  //   const prevClientWidth = document.body.clientWidth;
+  //   const prevWindowInnerWidth = window.innerWidth;
+  //   document.body.clientWidth = 100;
+  //   window.innerWidth = 500;
+  //
+  //   conditionallyUpdateScrollbar();
+  //   expect(stubbedSetScrollbarWidth).toHaveBeenCalled();
+  //
+  //   document.body.clientWidth = prevClientWidth;
+  //   window.innerWidth = prevWindowInnerWidth;
+  // });
 });

src/utils.js

@@ -105,3 +105,47 @@ export const tetherAttachements = [
   'left middle',
   'left bottom'
 ];
+
+// https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/js/src/modal.js#L436-L443
+export function getScrollbarWidth() {
+  let scrollDiv = document.createElement('div');
+  // .modal-scrollbar-measure styles // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/scss/_modal.scss#L106-L113
+  scrollDiv.style.position = 'absolute';
+  scrollDiv.style.top = '-9999px';
+  scrollDiv.style.width = '50px';
+  scrollDiv.style.height = '50px';
+  scrollDiv.style.overflow = 'scroll';
+  document.body.appendChild(scrollDiv);
+  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return scrollbarWidth;
+}
+
+export function setScrollbarWidth(padding) {
+  document.body.style.paddingRight = padding > 0 ? `${padding}px` : null;
+}
+
+export function isBodyOverflowing() {
+  return document.body.clientWidth < window.innerWidth;
+}
+
+export function getOriginalBodyPadding() {
+  return parseInt(
+    window.getComputedStyle(document.body, null).getPropertyValue('padding-right') || 0,
+    10
+  );
+}
+
+export function conditionallyUpdateScrollbar() {
+  const scrollbarWidth = getScrollbarWidth();
+  // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/js/src/modal.js#L420
+  const fixedContent = document.querySelectorAll('.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed')[0];
+  const bodyPadding = fixedContent ? parseInt(
+    fixedContent.style.paddingRight || 0,
+    10
+  ) : 0;
+
+  if (isBodyOverflowing()) {
+    setScrollbarWidth(bodyPadding + scrollbarWidth);
+  }
+}