@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
23 lines • 1.31 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
export default function ({ index, menuEl }) {
const item = menuEl.querySelector(`[data-mouse-target="${index}"]`);
if (item) {
// In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318
if (menuEl.clientHeight !== undefined && menuEl.clientHeight > 15) {
// We only want the menu element to scroll, as scrolling any further parent elements can
// cause the screen to jump, resulting in a select item being "clicked" while opening the select.
// Therefore, we scroll manually rather than using `scrollIntoView`.
const menuRect = menuEl.getBoundingClientRect();
const itemRect = item.getBoundingClientRect();
const offset = parseInt(menuEl.style.scrollPaddingBlockStart) || 0;
if (itemRect.top < menuRect.top + offset || itemRect.height > menuRect.height - offset) {
menuEl.scrollBy({ top: itemRect.top - menuRect.top - offset });
}
else if (itemRect.bottom > menuRect.bottom) {
menuEl.scrollBy({ top: itemRect.bottom - menuRect.bottom });
}
}
}
}
//# sourceMappingURL=scroll-to-index.js.map