Test select changes

cloudscape-design · Feb 12, 2025 · cf396d3 · cf396d3
1 parent 7c8f26d
commit cf396d3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/pages/select/select.test.page.tsx b/pages/select/select.test.page.tsx
@@ -76,9 +76,13 @@ export default function SelectPage() {
       <ScreenshotArea>
         <Box padding="l">
           <Box padding="s">
+            <div style={{ height: '700px' }}></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 }}>
+            <div
+              id="smallest_container"
+              style={{ overflow: 'hidden', blockSize: '500px', padding: 0, backgroundColor: 'red' }}
+            >
               <div style={{ overflow: 'hidden', blockSize: '900px' }}>
                 <Select
                   id="select_overflow"

diff --git a/src/internal/components/dropdown/dropdown-fit-handler.ts b/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,

diff --git a/src/select/parts/plain-list.tsx b/src/select/parts/plain-list.tsx
@@ -49,7 +49,9 @@ const PlainList = (
     () => (index: number) => {
       const item = menuRef.current?.querySelector<HTMLElement>(`[data-mouse-target="${index}"]`);
       if (highlightType.moveFocus && item) {
-        scrollElementIntoView(item);
+        if (menuRef.current?.clientHeight !== undefined && menuRef.current?.clientHeight > 15) {
+          scrollElementIntoView(item);
+        }
       }
     },
     [highlightType, menuRef]