fix: Parent container scrolls when select opens

pages/select/select.test.page.tsx

@@ -76,6 +76,7 @@ export default function SelectPage() {
       <ScreenshotArea>
         <Box padding="l">
           <Box padding="s">
+            <div style={{ height: '300px' }}>300px space above the select</div>
             <Box variant="h1">Overflow test</Box>
             <Box variant="p">Dropdown should not be rendered beyond the container with overflow hidden</Box>
             <div id="smallest_container" style={{ overflow: 'hidden', blockSize: '500px', padding: 0 }}>

src/internal/components/dropdown/dropdown-fit-handler.ts

@@ -291,7 +291,7 @@ export const getDropdownPosition = ({
     availableSpace.blockEnd < dropdownElement.offsetHeight && availableSpace.blockStart > availableSpace.blockEnd;
   const availableHeight = dropBlockStart ? availableSpace.blockStart : availableSpace.blockEnd;
   // Try and crop the bottom item when all options can't be displayed, affordance for "there's more"
-  const croppedHeight = stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16;
+  const croppedHeight = Math.max(stretchHeight ? availableHeight : Math.floor(availableHeight / 31) * 31 + 16, 15);
 
   return {
     dropBlockStart,

src/select/__integ__/select.test.ts

@@ -112,6 +112,50 @@ test(
   })
 );
 
+test(
+  'Selected item should scroll into view, but container not scroll, when open dropdown',
+  useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await page.setWindowSize({ height: 1000, width: 1100 });
+    await browser.url('/#/light/select/select.test');
+    const select = createWrapper().findSelect('#select_overflow');
+    const triggerSelector = select.findTrigger().toSelector();
+    const optionsSelector = select.findDropdown().findOpenDropdown().toSelector();
+    const selectedItem = select.findDropdown().findHighlightedOption().toSelector();
+    const { top: containerScrollTopBefore } = await page.getBoundingBox('#select_overflow');
+    await page.click(triggerSelector);
+    const { top: containerScrollTopAfter } = await page.getBoundingBox('#select_overflow');
+    const { height: dropdownHeight, top: dropdownTop } = await page.getBoundingBox(optionsSelector);
+    const { bottom: selectedItemBottom } = await page.getBoundingBox(selectedItem);
+    expect(selectedItemBottom).toEqual(dropdownTop + dropdownHeight);
+    expect(containerScrollTopBefore).toEqual(containerScrollTopAfter);
+  })
+);
+
+test(
+  'should not scroll the parent container when open dropdown in tiny space[inside containers with overflow:hidden]',
+  useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    // The issue AWSUI-60318 can be reproduced with viewport height 700
+    // Set the window height as 500 + other browser UI(e.g header ...)
+    const browserUIHeight = await browser.execute(() => {
+      return window.outerHeight - window.innerHeight;
+    });
+    await page.setWindowSize({ height: 500 + browserUIHeight, width: 1100 });
+    await browser.url('/#/light/select/select.test');
+    const select = createWrapper().findSelect('#select_overflow');
+    const triggerSelector = select.findTrigger().toSelector();
+    const optionsSelector = select.findDropdown().findOpenDropdown().toSelector();
+    const { top: containerScrollTopBefore } = await page.getBoundingBox('#select_overflow');
+    await page.click(triggerSelector);
+    const { top: containerScrollTopAfter } = await page.getBoundingBox('#select_overflow');
+    const { height: dropdownHeight } = await page.getBoundingBox(optionsSelector);
+    // Dropdown still has the minimun height, even the space is very tiny
+    expect(dropdownHeight).toEqual(15);
+    expect(containerScrollTopBefore).toEqual(containerScrollTopAfter);
+  })
+);
+
 test(
   'allows the select to be opened and closed using space',
   useBrowser(async browser => {

src/select/parts/plain-list.tsx

@@ -49,7 +49,10 @@ const PlainList = (
     () => (index: number) => {
       const item = menuRef.current?.querySelector<HTMLElement>(`[data-mouse-target="${index}"]`);
       if (highlightType.moveFocus && item) {
-        scrollElementIntoView(item);
+        // In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318
+        if (menuRef.current?.clientHeight !== undefined && menuRef.current?.clientHeight > 15) {
+          scrollElementIntoView(item);
+        }
       }
     },
     [highlightType, menuRef]