diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js index 3ecdc1449cc..eb75f218ede 100644 --- a/packages/mdc-select/foundation.js +++ b/packages/mdc-select/foundation.js @@ -185,16 +185,13 @@ export default class MDCSelectFoundation extends MDCFoundation { open_() { const {OPEN} = MDCSelectFoundation.cssClasses; const focusIndex = this.selectedIndex_ < 0 ? 0 : this.selectedIndex_; - const {left, top, transformOrigin} = this.computeMenuStylesForOpenAtIndex_(focusIndex); - this.adapter_.setMenuElStyle('left', left); - this.adapter_.setMenuElStyle('top', top); - this.adapter_.setMenuElStyle('transform-origin', transformOrigin); + this.setMenuStylesForOpenAtIndex_(focusIndex); this.adapter_.addClass(OPEN); this.adapter_.openMenu(focusIndex); } - computeMenuStylesForOpenAtIndex_(index) { + setMenuStylesForOpenAtIndex_(index) { const innerHeight = this.adapter_.getWindowInnerHeight(); const {left, top} = this.adapter_.computeBoundingRect(); @@ -206,20 +203,17 @@ export default class MDCSelectFoundation extends MDCFoundation { this.adapter_.rmMenuElAttr('aria-hidden'); let adjustedTop = top - itemOffsetTop; - const adjustedHeight = menuHeight - itemOffsetTop; const overflowsTop = adjustedTop < 0; - const overflowsBottom = adjustedTop + adjustedHeight > innerHeight; + const overflowsBottom = adjustedTop + menuHeight > innerHeight; if (overflowsTop) { adjustedTop = 0; } else if (overflowsBottom) { - adjustedTop = Math.max(0, adjustedTop - adjustedHeight); - } - - return { - left: `${left}px`, - top: `${adjustedTop}px`, - transformOrigin: `center ${itemOffsetTop}px`, + adjustedTop = Math.max(0, innerHeight - menuHeight); }; + + this.adapter_.setMenuElStyle('left', `${left}px`); + this.adapter_.setMenuElStyle('top', `${adjustedTop}px`); + this.adapter_.setMenuElStyle('transform-origin', `center ${itemOffsetTop}px`); } close_() { @@ -250,3 +244,4 @@ export default class MDCSelectFoundation extends MDCFoundation { } } } + diff --git a/test/unit/mdc-select/foundation-events.test.js b/test/unit/mdc-select/foundation-events.test.js index 4719b598db0..badb512542a 100644 --- a/test/unit/mdc-select/foundation-events.test.js +++ b/test/unit/mdc-select/foundation-events.test.js @@ -257,7 +257,7 @@ test('when opened clamps the menu position to the bottom of the window if it wou foundation.setSelectedIndex(1); td.when(mockAdapter.computeBoundingRect()).thenReturn({ left: 100, - top: mockInnerHeight, + top: mockInnerHeight-40, }); td.when(mockAdapter.getOffsetTopForOptionAtIndex(1)).thenReturn(20); handlers.click(createEvent()); @@ -265,7 +265,7 @@ test('when opened clamps the menu position to the bottom of the window if it wou const mockLocation = mockAdapter.computeBoundingRect(); td.verify(mockAdapter.setMenuElStyle('left', `${mockLocation.left}px`)); td.verify( - mockAdapter.setMenuElStyle('top', `${mockLocation.top - mockMenuHeight}px`) + mockAdapter.setMenuElStyle('top', `${mockInnerHeight - mockMenuHeight}px`) ); });