[EuiSelectable] Fix text truncation when a scrollbar is present

changelogs/upcoming/7392.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where scrollbar widths were not being accounted for

src-docs/src/views/selectable/selectable_truncation.tsx

@@ -131,6 +131,7 @@ export default () => {
           searchable={true}
           options={options}
           onChange={(updatedOptions) => setOptions(updatedOptions)}
+          height={100}
           listProps={{
             isVirtualized: textWrap !== 'wrap',
             textWrap,

src/components/selectable/selectable.spec.tsx

@@ -284,6 +284,23 @@ describe('EuiSelectable', () => {
         );
       });
 
+      it('correctly accounts for scrollbar width', () => {
+        const multipleOptions = Array.from({ length: 5 }).map(
+          () => sharedProps.options[0]
+        );
+        cy.realMount(
+          <EuiSelectableListboxOnly
+            {...truncationProps}
+            height={100}
+            options={multipleOptions}
+          />
+        );
+
+        cy.get('[data-test-subj="truncatedText"]')
+          .first()
+          .should('have.text', 'Lorem ipsum …iscing elit.');
+      });
+
       it('correctly accounts for the keyboard focus badge', () => {
         cy.realMount(<EuiSelectableListboxOnly {...truncationProps} />);
 

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

@@ -362,6 +362,13 @@ describe('EuiSelectableListItem', () => {
   });
 
   describe('truncation performance optimization', () => {
+    // Mock requestAnimationFrame
+    beforeEach(() => {
+      jest
+        .spyOn(window, 'requestAnimationFrame')
+        .mockImplementation((cb: Function) => cb());
+    });
+
     it('does not render EuiTextTruncate if not virtualized and text is wrapping', () => {
       const { container } = render(
         <EuiSelectableList
@@ -395,6 +402,12 @@ describe('EuiSelectableListItem', () => {
     });
 
     it('attempts to use a default optimized option width calculated from the wrapping EuiAutoSizer', () => {
+      // jsdom doesn't return valid element offsetWidths, so we have to mock it here
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+        configurable: true,
+        value: 600,
+      });
+
       const { container } = render(
         <EuiSelectableList
           options={options}
@@ -409,6 +422,9 @@ describe('EuiSelectableListItem', () => {
       expect(
         container.querySelector('[data-resize-observer]')
       ).not.toBeInTheDocument();
+
+      // Reset jsdom mock
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { value: 0 });
     });
 
     it('falls back to individual resize observers if options have append/prepend nodes', () => {

src/components/selectable/selectable_list/selectable_list.tsx

@@ -479,15 +479,23 @@ export class EuiSelectableList<T> extends Component<
     const checkedIconOffset = this.props.showIcons === false ? 0 : 28; // Defaults to true
     this.focusBadgeOffset = this.props.onFocusBadge === false ? 0 : 46;
 
-    this.setState({
-      defaultOptionWidth: containerWidth - paddingOffset - checkedIconOffset,
-    });
+    // Wait a tick for the listbox ref to update before proceeding
+    requestAnimationFrame(() => {
+      const scrollbarOffset = this.listBoxRef
+        ? containerWidth - this.listBoxRef.offsetWidth
+        : 0;
 
-    // Potentially force list rows to rerender on dynamic resize as well,
-    // but try to do it as lightly as possible
-    if (truncationProps || (searchable && searchValue)) {
-      this.forceVirtualizedListRowRerender();
-    }
+      this.setState({
+        defaultOptionWidth:
+          containerWidth - scrollbarOffset - paddingOffset - checkedIconOffset,
+      });
+
+      // Potentially force list rows to rerender on dynamic resize as well,
+      // but try to do it as lightly as possible
+      if (truncationProps || (searchable && searchValue)) {
+        this.forceVirtualizedListRowRerender();
+      }
+    });
   };
 
   getTruncationProps = (option: EuiSelectableOption, isFocused: boolean) => {