Select option list follows page scroll

packages/mdc-checkbox/_mixins.scss

@@ -156,7 +156,6 @@
   &-checked-unchecked,
   &-indeterminate-unchecked {
     .mdc-checkbox__background {
-      animation-duration: $mdc-checkbox-transition-duration * 2;
       animation-timing-function: linear;
     }
   }

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. |

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 = {

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);
+  }
 }
 

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),
     });
   }
 

packages/mdc-select/mdc-select.scss

@@ -264,3 +264,8 @@
 // with CSS. Use the font-size rule instead.
 
 // postcss-bem-linter: end
+
+.mdc-select-scroll-lock {
+  height: 100vh;
+  overflow: hidden;
+}

packages/mdc-theme/_color-palette.scss

@@ -207,7 +207,7 @@ $material-color-yellow-700: #fbc02d;
 $material-color-yellow-800: #f9a825;
 $material-color-yellow-900: #f57f17;
 $material-color-yellow-a100: #ffff8d;
-$material-color-yellow-a200: #ffff00;
+$material-color-yellow-a200: #ff0;
 $material-color-yellow-a400: #ffea00;
 $material-color-yellow-a700: #ffd600;
 
@@ -269,7 +269,7 @@ $material-color-brown-900: #3e2723;
 
 $material-color-grey-50: #fafafa;
 $material-color-grey-100: #f5f5f5;
-$material-color-grey-200: #eeeeee;
+$material-color-grey-200: #eee;
 $material-color-grey-300: #e0e0e0;
 $material-color-grey-400: #bdbdbd;
 $material-color-grey-500: #9e9e9e;

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();

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'));
+});