let heightOffset = 0;
const toggleHeight = this.toggle.getBoundingClientRect().height;
const dropUpwards = menuOriginalRect.bottom > window.innerHeight;
+ const containerRect = this.container.getBoundingClientRect();
// If enabled, Move to body to prevent being trapped within scrollable sections
if (this.moveMenu) {
if (dropUpwards) {
this.menu.style.top = 'initial';
this.menu.style.bottom = `${heightOffset}px`;
+ const maxHeight = (window.innerHeight - 40) - (window.innerHeight - containerRect.bottom);
+ this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
} else {
this.menu.style.top = `${heightOffset}px`;
this.menu.style.bottom = 'initial';
+ const maxHeight = (window.innerHeight - 40) - containerRect.top;
+ this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
}
// Set listener to hide on mouse leave or window click
this.toggle.setAttribute('aria-expanded', 'false');
this.menu.style.top = '';
this.menu.style.bottom = '';
+ this.menu.style.maxHeight = '';
if (this.moveMenu) {
this.menu.style.position = '';
onSelect(this.toggle, event => {
event.stopPropagation();
+ event.preventDefault();
this.show(event);
if (event instanceof KeyboardEvent) {
keyboardNavHandler.focusNext();