fix(select): Don't scroll page when select's menu is open (#1500)

Resolves #879.
material-components · Nov 20, 2017 · bddd747 · bddd747
1 parent 476c81f
commit bddd747
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 1 deletion.
diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -331,6 +331,8 @@ within `componentDidUpdate`.
 | --- | --- |
 | `addClass(className: string) => void` | Adds a class to the root element. |
 | `removeClass(className: string) => void` | Removes a class from the root element. |
+| `addBodyClass(className: string) => void` | Adds a class to the body. |
+| `removeBodyClass(className: string) => void` | Removes a class from the body. |
 | `setAttr(attr: string, value: string) => void` | Sets attribute `attr` to value `value` on the root element. |
 | `rmAttr(attr: string) => void` | Removes attribute `attr` from the root element. |
 | `computeBoundingRect() => {left: number, top: number}` | Returns an object with a shape similar to a `ClientRect` object, with a `left` and `top` property specifying the element's position on the page relative to the viewport. The easiest way to achieve this is by calling `getBoundingClientRect()` on the root element. |

diff --git a/packages/mdc-select/constants.js b/packages/mdc-select/constants.js
@@ -17,6 +17,7 @@ export const cssClasses = {
   ROOT: 'mdc-select',
   OPEN: 'mdc-select--open',
   DISABLED: 'mdc-select--disabled',
+  SCROLL_LOCK: 'mdc-select-scroll-lock',
 };
 
 export const strings = {

diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
@@ -37,6 +37,8 @@ export default class MDCSelectFoundation extends MDCFoundation {
     return {
       addClass: (/* className: string */) => {},
       removeClass: (/* className: string */) => {},
+      addBodyClass: (/* className: string */) => {},
+      removeBodyClass: (/* className: string */) => {},
       setAttr: (/* attr: string, value: string */) => {},
       rmAttr: (/* attr: string */) => {},
       computeBoundingRect: () => /* {left: number, top: number} */ ({left: 0, top: 0}),
@@ -183,6 +185,7 @@ export default class MDCSelectFoundation extends MDCFoundation {
   }
 
   open_() {
+    this.disableScroll_();
     const {OPEN} = MDCSelectFoundation.cssClasses;
     const focusIndex = this.selectedIndex_ < 0 ? 0 : this.selectedIndex_;
 
@@ -220,6 +223,7 @@ export default class MDCSelectFoundation extends MDCFoundation {
     const {OPEN} = MDCSelectFoundation.cssClasses;
     this.adapter_.removeClass(OPEN);
     this.adapter_.focus();
+    this.enableScroll_();
   }
 
   handleDisplayViaKeyboard_(evt) {
@@ -243,5 +247,13 @@ export default class MDCSelectFoundation extends MDCFoundation {
       this.displayHandler_(evt);
     }
   }
+
+  disableScroll_() {
+    this.adapter_.addBodyClass(cssClasses.SCROLL_LOCK);
+  }
+
+  enableScroll_() {
+    this.adapter_.removeBodyClass(cssClasses.SCROLL_LOCK);
+  }
 }
 
diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
@@ -112,6 +112,8 @@ export class MDCSelect extends MDCComponent {
       deregisterMenuInteractionHandler: (type, handler) => this.menu_.unlisten(type, handler),
       notifyChange: () => this.emit(MDCSelectFoundation.strings.CHANGE_EVENT, this),
       getWindowInnerHeight: () => window.innerHeight,
+      addBodyClass: (className) => document.body.classList.add(className),
+      removeBodyClass: (className) => document.body.classList.remove(className),
     });
   }
 

diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -264,3 +264,7 @@
 // with CSS. Use the font-size rule instead.
 
 // postcss-bem-linter: end
+
+.mdc-select-scroll-lock {
+  overflow: hidden;
+}
diff --git a/test/unit/mdc-select/foundation.test.js b/test/unit/mdc-select/foundation.test.js
@@ -41,7 +41,7 @@ test('default adapter returns a complete adapter implementation', () => {
     'isMenuOpen', 'setSelectedTextContent', 'getNumberOfOptions', 'getTextForOptionAtIndex',
     'setAttrForOptionAtIndex', 'rmAttrForOptionAtIndex', 'getOffsetTopForOptionAtIndex',
     'registerMenuInteractionHandler', 'deregisterMenuInteractionHandler', 'notifyChange',
-    'getWindowInnerHeight', 'getValueForOptionAtIndex',
+    'getWindowInnerHeight', 'getValueForOptionAtIndex', 'addBodyClass', 'removeBodyClass',
   ]);
 
   const renderingContext = MDCSelectFoundation.defaultAdapter.create2dRenderingContext();

diff --git a/test/unit/mdc-select/mdc-select.test.js b/test/unit/mdc-select/mdc-select.test.js
@@ -379,3 +379,18 @@ test('adapter#getValueForOptionAtIndex returns the textContent of the option at
   const {component} = setupTest();
   assert.equal(component.getDefaultFoundation().adapter_.getValueForOptionAtIndex(3), 'Item 4 no id');
 });
+
+test('adapter#addBodyClass adds a class to the body', () => {
+  const {component} = setupTest();
+  component.getDefaultFoundation().adapter_.addBodyClass('mdc-select-scroll-lock');
+  assert.isOk(document.querySelector('body').classList.contains('mdc-select-scroll-lock'));
+});
+
+test('adapter#removeBodyClass remove a class from the body', () => {
+  const {component} = setupTest();
+  const body = document.querySelector('body');
+
+  body.classList.add('mdc-select-scroll-lock');
+  component.getDefaultFoundation().adapter_.removeBodyClass('mdc-select-scroll-lock');
+  assert.isNotOk(body.classList.contains('mdc-select-scroll-lock'));
+});