fix: prevent list item jump on hover in virtual scrolling (v2)

pages/select/virtual-scroll.page.tsx

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { SpaceBetween } from '~components';
+import Select, { SelectProps } from '~components/select';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+const options: SelectProps.Options = Array.from({ length: 1000 }, (_, i) => ({
+  value: `${i}`,
+  label: `Option ${i + 1}`,
+}));
+
+export default function () {
+  const [selected, setSelected] = useState<SelectProps['selectedOption']>(null);
+
+  return (
+    <>
+      <h1>Virtual Scroll</h1>
+
+      <ScreenshotArea
+        style={{
+          height: 500,
+          // Prevents dropdown from expanding outside of the screenshot area
+          overflow: 'auto',
+        }}
+      >
+        <SpaceBetween size="s">
+          <Select
+            placeholder="Demo with manual filtering"
+            selectedOption={selected}
+            options={options}
+            filteringType="auto"
+            finishedText="End of all results"
+            onChange={event => setSelected(event.detail.selectedOption)}
+            virtualScroll={true}
+            expandToViewport={false}
+            ariaLabel="select demo"
+            data-testid="select-demo"
+          />
+        </SpaceBetween>
+      </ScreenshotArea>
+    </>
+  );
+}

src/internal/components/selectable-item/styles.scss

@@ -206,6 +206,67 @@
     &:first-of-type:not(.selected, .highlighted) {
       border-block-start-color: awsui.$color-border-dropdown-item-top;
     }
+
+    // When using virtual scrolling, use box-shadows to mimic changing border
+    // width and set the actual border to a fixed width to prevent jumping
+    // behaviour when hovering selectable items
+
+    $virtual-border-offset: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
+    $virtual-border-offset-double: calc(2 * #{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
+
+    &.highlighted:not(.selected),
+    &.selected {
+      border-width: awsui.$border-divider-list-width;
+      padding-block: calc(#{styles.$option-padding-vertical} + #{$virtual-border-offset});
+      padding-inline: calc(#{styles.$control-padding-horizontal} + #{$virtual-border-offset});
+
+      &.pad-bottom {
+        padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs} + #{$virtual-border-offset});
+      }
+
+      &.child {
+        padding-inline-start: calc(#{awsui.$space-xxl} + #{$virtual-border-offset});
+      }
+
+      &.parent.interactiveGroups {
+        padding-block: calc(#{styles.$group-option-padding-vertical} + #{$virtual-border-offset});
+      }
+    }
+
+    &.highlighted:not(.selected) {
+      box-shadow: inset 0 0 0 $virtual-border-offset awsui.$color-border-dropdown-item-hover;
+
+      &.is-keyboard {
+        box-shadow: inset 0 0 0 $virtual-border-offset awsui.$color-border-dropdown-item-focused;
+      }
+    }
+
+    &.selected {
+      box-shadow: inset 0 0 0 $virtual-border-offset awsui.$color-border-dropdown-item-selected;
+
+      &.highlighted {
+        box-shadow:
+          inset 0 0 0 $virtual-border-offset awsui.$color-border-dropdown-item-selected,
+          inset 0 0 0 $virtual-border-offset-double awsui.$color-border-dropdown-item-hover;
+
+        &.is-keyboard {
+          box-shadow:
+            inset 0 0 0 $virtual-border-offset awsui.$color-border-dropdown-item-selected,
+            inset 0 0 0 $virtual-border-offset-double awsui.$color-border-dropdown-item-focused;
+        }
+      }
+    }
+
+    &.parent:not(.interactiveGroups) {
+      border-block-start-width: awsui.$border-divider-list-width;
+      border-block-start-color: awsui.$color-border-dropdown-group;
+      padding-block: awsui.$space-xs;
+      padding-inline: awsui.$space-xs;
+    }
+
+    &.parent.interactiveGroups:not(.highlighted):not(.selected) {
+      border-block-start-color: awsui.$color-border-dropdown-group;
+    }
   }
 }
 

src/select/parts/virtual-list.tsx

@@ -107,7 +107,10 @@ const VirtualListOpen = forwardRef(
           aria-hidden="true"
           key="total-size"
           className={styles['layout-strut']}
-          style={{ height: totalSize - stickySize }}
+          style={{
+            // Adjust totalSize to account for 1px overlap per item (matching the position adjustment in renderOptions)
+            height: totalSize - filteredOptions.length - stickySize,
+          }}
         />
         {listBottom ? (
           <div role="option" className={styles['list-bottom']}>

src/select/utils/render-options.tsx

@@ -65,11 +65,14 @@ export const renderOptions = ({
     const ListItem = useInteractiveGroups ? MultiselectItem : Item;
     const isSticky = firstOptionSticky && globalIndex === 0;
 
+    // Adjust virtual position to create 1px overlap between consecutive selected items in multiselect
+    const adjustedVirtualPosition = virtualItem ? virtualItem.start - index : undefined;
+
     return (
       <ListItem
         key={globalIndex}
         {...props}
-        virtualPosition={virtualItem && virtualItem.start}
+        virtualPosition={adjustedVirtualPosition}
         ref={isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef}
         padBottom={padBottom}
         screenReaderContent={screenReaderContent}