[EuiSelectable] Support scrolling in non-virtualized lists

changelogs/upcoming/7609.md

@@ -0,0 +1 @@
+- Updated `EuiSelectable` to support scrolling list containers when `listProps.isVirtualization` is set to `false`

src-docs/src/views/selectable/selectable_example.js

@@ -479,11 +479,14 @@ export const SelectableExample = {
           </p>
           <p>
             If <EuiCode>listProps.isVirtualized</EuiCode> is set to{' '}
-            <EuiCode>false</EuiCode>, each row will fit its contents and removes
-            all scrolling. Therefore, we recommend having a large enough
-            container to accommodate all options. You can also remove truncation
-            by setting <EuiCode>{'textWrap="wrap"'}</EuiCode> when
-            virtualization is off.
+            <EuiCode>false</EuiCode>, each row will fit its content. You can
+            also remove truncation by setting{' '}
+            <EuiCode>{'textWrap="wrap"'}</EuiCode> when virtualization is off.
+            Note that while this is useful for dynamic options, it can also be
+            computationally expensive as <em>all</em> off-screen options will be
+            rendered to the DOM. We do not recommend turning off virtualization
+            for high numbers of options, but if you absolutely must do so, we
+            suggest using methods such as async loading more options.
           </p>
           <h3>Custom content</h3>
           <p>

src/components/selectable/selectable.spec.tsx

@@ -253,6 +253,22 @@ describe('EuiSelectable', () => {
     });
   });
 
+  describe('isVirtualization={false}', () => {
+    it('correctly scrolls keyboard navigated elements into view', () => {
+      cy.realMount(
+        <EuiSelectableListboxOnly
+          listProps={{ isVirtualized: false }}
+          height={50}
+        />
+      );
+      cy.get('.euiSelectableList__list').invoke('scrollTop').should('eq', 0);
+
+      cy.realPress('Tab');
+      cy.realPress('ArrowUp');
+      cy.get('.euiSelectableList__list').invoke('scrollTop').should('eq', 48);
+    });
+  });
+
   describe('truncation', () => {
     const sharedProps = {
       style: { width: 240 },

src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`EuiSelectableListItem group labels handles updating aria attrs correctl
     tabindex="-1"
   >
     <ul
-      aria-activedescendant="option_undefined"
       aria-label="aria-label"
       aria-multiselectable="true"
       id="list"
@@ -1456,7 +1455,7 @@ exports[`EuiSelectableListItem props height is full 1`] = `
 </div>
 `;
 
-exports[`EuiSelectableListItem props isVirtualized can be false 1`] = `
+exports[`EuiSelectableListItem props isVirtualized={false} renders 1`] = `
 <div
   class="euiSelectableList testClass1 testClass2 emotion-euiTestCss"
   data-test-subj="test subject string"

src/components/selectable/selectable_list/_selectable_list.scss

@@ -20,6 +20,8 @@
 .euiSelectableList__list {
   @include euiOverflowShadow;
   @include euiScrollBar;
+  overflow: auto;
+  position: relative; // Chrome/Edge loses its mind without this and doesn't render `mask-image` correctly
 
   &:focus,
   & > ul:focus {

src/components/selectable/selectable_list/selectable_list.test.tsx

@@ -227,16 +227,33 @@ describe('EuiSelectableListItem', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('isVirtualized can be false', () => {
-      const { container } = render(
-        <EuiSelectableList
-          options={options}
-          isVirtualized={false}
-          {...selectableListRequiredProps}
-        />
-      );
+    describe('isVirtualized={false}', () => {
+      it('renders', () => {
+        const { container } = render(
+          <EuiSelectableList
+            options={options}
+            {...selectableListRequiredProps}
+            isVirtualized={false}
+          />
+        );
 
-      expect(container.firstChild).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
+      });
+
+      it('maintains the passed height when false', () => {
+        const { container } = render(
+          <EuiSelectableList
+            options={options}
+            {...selectableListRequiredProps}
+            isVirtualized={false}
+            height={300}
+          />
+        );
+
+        expect(container.querySelector('.euiSelectableList__list')).toHaveStyle(
+          'block-size: 300px'
+        );
+      });
     });
 
     test('searchable enables correct screen reader instructions', () => {

src/components/selectable/selectable_list/selectable_list.tsx

@@ -244,17 +244,30 @@ export class EuiSelectableList<T> extends Component<
   };
 
   componentDidUpdate(prevProps: EuiSelectableListProps<T>) {
-    const { activeOptionIndex, visibleOptions, options } = this.props;
+    const { isVirtualized, activeOptionIndex, visibleOptions, options } =
+      this.props;
 
-    if (this.listBoxRef && this.props.searchable !== true) {
-      this.listBoxRef.setAttribute(
-        'aria-activedescendant',
-        `${this.props.makeOptionId(activeOptionIndex)}`
-      );
-    }
+    if (prevProps.activeOptionIndex !== activeOptionIndex) {
+      const { makeOptionId } = this.props;
 
-    if (this.listRef && typeof activeOptionIndex !== 'undefined') {
-      this.listRef.scrollToItem(activeOptionIndex, 'auto');
+      if (this.listBoxRef && this.props.searchable !== true) {
+        this.listBoxRef.setAttribute(
+          'aria-activedescendant',
+          makeOptionId(activeOptionIndex)
+        );
+      }
+
+      if (typeof activeOptionIndex !== 'undefined') {
+        if (isVirtualized) {
+          this.listRef?.scrollToItem(activeOptionIndex, 'auto');
+        } else {
+          const activeOptionId = `#${makeOptionId(activeOptionIndex)}`;
+          const activeOptionEl = this.listBoxRef?.querySelector(activeOptionId);
+          if (activeOptionEl) {
+            activeOptionEl.scrollIntoView({ block: 'nearest' });
+          }
+        }
+      }
     }
 
     if (
@@ -609,10 +622,12 @@ export class EuiSelectableList<T> extends Component<
       ...rest
     } = this.props;
 
+    const heightIsFull = forcedHeight === 'full';
+
     const classes = classNames(
       'euiSelectableList',
       {
-        'euiSelectableList-fullHeight': forcedHeight === 'full',
+        'euiSelectableList-fullHeight': heightIsFull,
         'euiSelectableList-bordered': bordered,
       },
       className
@@ -625,6 +640,7 @@ export class EuiSelectableList<T> extends Component<
         ) : (
           <div
             className="euiSelectableList__list"
+            style={!heightIsFull ? { blockSize: forcedHeight } : undefined}
             ref={this.removeScrollableTabStop}
           >
             <ul ref={this.setListBoxRef}>