Fix ComboBox options' tag flicking

.changeset/light-poems-trade.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+`iui-breadcrumbs-list` now stretches to the width of `iui-breadcrumbs`.

.changeset/mean-mangos-relax.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed a bug in `ComboBox` with `multiple` enabled where the number of tags used to keep changing in an infinite loop in certain specific container widths. As a result of this fix, the overflow behavior has been improved in other components too (e.g. `ButtonGroup`, `Breadcrumbs`, `MiddleTextTruncation`, etc.)

packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss

@@ -20,6 +20,7 @@
   list-style-type: none;
   user-select: none;
   block-size: 100%;
+  inline-size: 100%;
 }
 
 .iui-breadcrumbs-item {

packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.test.tsx

@@ -3,12 +3,10 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { Breadcrumbs } from './Breadcrumbs.js';
-import { SvgChevronRight, SvgMore } from '../../utils/index.js';
-import * as UseOverflow from '../../utils/hooks/useOverflow.js';
-import { IconButton } from '../Buttons/IconButton.js';
+import { SvgChevronRight } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { userEvent } from '@testing-library/user-event';
 
@@ -56,13 +54,6 @@ const assertBaseElement = (
   });
 };
 
-const useOverflowMock = vi
-  .spyOn(UseOverflow, 'useOverflow')
-  .mockImplementation((items) => [vi.fn(), items.length]);
-beforeEach(() => {
-  useOverflowMock.mockImplementation((items) => [vi.fn(), items.length]);
-});
-
 it('should render all elements in default state', () => {
   const { container } = renderComponent();
   assertBaseElement(container);
@@ -181,57 +172,6 @@ it('should accept currentIndex prop', () => {
   assertBaseElement(container, { currentIndex: 1 });
 });
 
-it('should overflow when there is not enough space', () => {
-  useOverflowMock.mockReturnValue([vi.fn(), 2]);
-  const { container } = renderComponent();
-
-  expect(container.querySelector('.iui-breadcrumbs')).toBeTruthy();
-  expect(container.querySelector('.iui-breadcrumbs-list')).toBeTruthy();
-
-  const breadcrumbs = container.querySelectorAll('.iui-breadcrumbs-item');
-  expect(breadcrumbs.length).toEqual(3);
-  expect(breadcrumbs[0].textContent).toEqual('Item 0');
-  expect(breadcrumbs[1].textContent).toEqual('…');
-  expect(breadcrumbs[1].firstElementChild?.textContent).toContain('…');
-  expect(breadcrumbs[2].textContent).toEqual('Item 2');
-});
-
-it('should handle overflow when overflowButton is specified', () => {
-  const onClick = vi.fn();
-  useOverflowMock.mockReturnValue([vi.fn(), 2]);
-  const { container } = renderComponent({
-    overflowButton: (visibleCount) => (
-      <IconButton onClick={onClick(visibleCount)}>
-        <SvgMore />
-      </IconButton>
-    ),
-  });
-
-  expect(container.querySelector('.iui-breadcrumbs')).toBeTruthy();
-  expect(container.querySelector('.iui-breadcrumbs-list')).toBeTruthy();
-
-  const breadcrumbs = container.querySelectorAll('.iui-breadcrumbs-item');
-  expect(breadcrumbs.length).toEqual(3);
-  fireEvent.click(breadcrumbs[1]);
-  expect(onClick).toHaveBeenCalledTimes(1);
-  expect(onClick).toHaveBeenCalledWith(2);
-});
-
-it('should show the last item when only one can be visible', () => {
-  useOverflowMock.mockReturnValue([vi.fn(), 1]);
-
-  const { container } = renderComponent();
-
-  expect(container.querySelector('.iui-breadcrumbs')).toBeTruthy();
-  expect(container.querySelector('.iui-breadcrumbs-list')).toBeTruthy();
-
-  const breadcrumbs = container.querySelectorAll('.iui-breadcrumbs-item');
-  expect(breadcrumbs.length).toEqual(2);
-  expect(breadcrumbs[0].textContent).toEqual('…');
-  expect(breadcrumbs[0].firstElementChild?.textContent).toContain('…');
-  expect(breadcrumbs[1].textContent).toEqual('Item 2');
-});
-
 it('should support legacy api', async () => {
   const onClick = vi.fn();
 

packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx

@@ -5,15 +5,14 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  useMergedRefs,
-  useOverflow,
   SvgChevronRight,
   Box,
   createWarningLogger,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
+import { OverflowContainer } from '../../utils/components/OverflowContainer.js';
 
 const logWarning = createWarningLogger();
 
@@ -124,62 +123,67 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
 
-  const [overflowRef, visibleCount] = useOverflow(items);
-  const refs = useMergedRefs(overflowRef, ref);
-
   return (
     <Box
       as='nav'
       className={cx('iui-breadcrumbs', className)}
-      ref={refs}
+      ref={ref}
       aria-label='Breadcrumb'
       {...rest}
     >
-      <Box as='ol' className='iui-breadcrumbs-list'>
-        {visibleCount > 1 && (
-          <>
-            <ListItem item={items[0]} isActive={currentIndex === 0} />
-            <Separator separator={separator} />
-          </>
-        )}
-        {items.length - visibleCount > 0 && (
+      <OverflowContainer
+        as='ol'
+        className='iui-breadcrumbs-list'
+        itemsLength={items.length}
+      >
+        {(visibleCount: number) => (
           <>
-            <Box as='li' className='iui-breadcrumbs-item'>
-              {overflowButton ? (
-                overflowButton(visibleCount)
-              ) : (
-                <Box as='span' className='iui-breadcrumbs-content'>
-                  …
+            {visibleCount > 1 && (
+              <>
+                <ListItem item={items[0]} isActive={currentIndex === 0} />
+                <Separator separator={separator} />
+              </>
+            )}
+            {items.length - visibleCount > 0 && (
+              <>
+                <Box as='li' className='iui-breadcrumbs-item'>
+                  {overflowButton ? (
+                    overflowButton(visibleCount)
+                  ) : (
+                    <Box as='span' className='iui-breadcrumbs-content'>
+                      …
+                    </Box>
+                  )}
                 </Box>
-              )}
-            </Box>
-            <Separator separator={separator} />
+                <Separator separator={separator} />
+              </>
+            )}
+            {items
+              .slice(
+                visibleCount > 1
+                  ? items.length - visibleCount + 1
+                  : items.length - 1,
+              )
+              .map((_, _index) => {
+                const index =
+                  visibleCount > 1
+                    ? 1 + (items.length - visibleCount) + _index
+                    : items.length - 1;
+                return (
+                  <React.Fragment key={index}>
+                    <ListItem
+                      item={items[index]}
+                      isActive={currentIndex === index}
+                    />
+                    {index < items.length - 1 && (
+                      <Separator separator={separator} />
+                    )}
+                  </React.Fragment>
+                );
+              })}
           </>
         )}
-        {items
-          .slice(
-            visibleCount > 1
-              ? items.length - visibleCount + 1
-              : items.length - 1,
-          )
-          .map((_, _index) => {
-            const index =
-              visibleCount > 1
-                ? 1 + (items.length - visibleCount) + _index
-                : items.length - 1;
-            return (
-              <React.Fragment key={index}>
-                <ListItem
-                  item={items[index]}
-                  isActive={currentIndex === index}
-                />
-                {index < items.length - 1 && (
-                  <Separator separator={separator} />
-                )}
-              </React.Fragment>
-            );
-          })}
-      </Box>
+      </OverflowContainer>
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'nav', BreadcrumbsProps>;

packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.test.tsx

@@ -2,13 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { SvgMore, SvgClose as SvgPlaceholder } from '../../utils/index.js';
-import { fireEvent, render } from '@testing-library/react';
-import * as UseOverflow from '../../utils/hooks/useOverflow.js';
+import { render } from '@testing-library/react';
 
 import { ButtonGroup } from './ButtonGroup.js';
 import { Button } from '../Buttons/Button.js';
-import { IconButton } from '../Buttons/IconButton.js';
 
 it('should render with two buttons', () => {
   const { container } = render(
@@ -34,101 +31,6 @@ it('should render with four buttons', () => {
   expect(container.querySelectorAll('button').length).toBe(4);
 });
 
-it.each(['start', 'end'] as const)(
-  'should handle overflow when overflowButton is specified (%s)',
-  (overflowPlacement) => {
-    const scrollWidthSpy = vi
-      .spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
-      .mockReturnValueOnce(250)
-      .mockReturnValue(200);
-    const offsetWidthSpy = vi
-      .spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
-      .mockReturnValue(200);
-
-    const mockOnClick = vi.fn();
-
-    const OverflowGroup = () => {
-      const buttons = [...Array(3)].map((_, index) => (
-        <IconButton key={index}>
-          <SvgPlaceholder />
-        </IconButton>
-      ));
-      return (
-        <ButtonGroup
-          overflowButton={(overflowStart) => (
-            <IconButton onClick={() => mockOnClick(overflowStart)}>
-              <SvgMore />
-            </IconButton>
-          )}
-          overflowPlacement={overflowPlacement}
-        >
-          {buttons}
-        </ButtonGroup>
-      );
-    };
-    const { container } = render(<OverflowGroup />);
-
-    expect(container.querySelector('.iui-button-group')).toBeTruthy();
-
-    const buttons = container.querySelectorAll('.iui-button');
-    expect(buttons).toHaveLength(2);
-    fireEvent.click(overflowPlacement === 'end' ? buttons[1] : buttons[0]);
-    expect(mockOnClick).toHaveBeenCalledWith(1);
-
-    scrollWidthSpy.mockRestore();
-    offsetWidthSpy.mockRestore();
-  },
-);
-
-it.each(['start', 'end'] as const)(
-  'should handle overflow when available space is smaller than one element (%s)',
-  (overflowPlacement) => {
-    const scrollWidthSpy = vi
-      .spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
-      .mockReturnValue(200);
-    const offsetWidthSpy = vi
-      .spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
-      .mockReturnValue(50);
-
-    const OverflowGroup = () => {
-      const buttons = [...Array(3)].map((_, index) => (
-        <IconButton key={index}>
-          <SvgPlaceholder />
-        </IconButton>
-      ));
-      return (
-        <ButtonGroup
-          overflowButton={() => (
-            <IconButton>
-              <SvgMore />
-            </IconButton>
-          )}
-          overflowPlacement={overflowPlacement}
-        >
-          {buttons}
-        </ButtonGroup>
-      );
-    };
-    const { container } = render(<OverflowGroup />);
-    const {
-      container: { firstChild: moreIconButton },
-    } = render(
-      <IconButton>
-        <SvgMore />
-      </IconButton>,
-    );
-
-    expect(container.querySelector('.iui-button-group')).toBeTruthy();
-
-    const buttons = container.querySelectorAll('.iui-button');
-    expect(buttons).toHaveLength(1);
-    expect(buttons[0]).toEqual(moreIconButton);
-
-    scrollWidthSpy.mockRestore();
-    offsetWidthSpy.mockRestore();
-  },
-);
-
 it('should work in vertical orientation', () => {
   const { container } = render(
     <ButtonGroup orientation='vertical'>
@@ -142,44 +44,3 @@ it('should work in vertical orientation', () => {
   expect(group).toBeTruthy();
   expect(group.children).toHaveLength(2);
 });
-
-it.each`
-  visibleCount | overflowStart | length | overflowPlacement
-  ${9}         | ${1}          | ${10}  | ${'start'}
-  ${8}         | ${2}          | ${10}  | ${'start'}
-  ${4}         | ${6}          | ${10}  | ${'start'}
-  ${3}         | ${7}          | ${10}  | ${'start'}
-  ${1}         | ${9}          | ${10}  | ${'start'}
-  ${9}         | ${8}          | ${10}  | ${'end'}
-  ${8}         | ${7}          | ${10}  | ${'end'}
-  ${4}         | ${3}          | ${10}  | ${'end'}
-  ${3}         | ${2}          | ${10}  | ${'end'}
-  ${1}         | ${0}          | ${10}  | ${'end'}
-`(
-  'should calculate correct values when overflowPlacement=$overflowPlacement and visibleCount=$visibleCount',
-  ({ visibleCount, overflowStart, length, overflowPlacement }) => {
-    const useOverflowMock = vi
-      .spyOn(UseOverflow, 'useOverflow')
-      .mockReturnValue([vi.fn(), visibleCount]);
-
-    const buttons = [...Array(length)].map((_, index) => (
-      <button key={index}>{index}</button>
-    ));
-
-    const { container } = render(
-      <ButtonGroup
-        overflowButton={(startIndex) => <span>{startIndex}</span>}
-        overflowPlacement={overflowPlacement}
-      >
-        {buttons}
-      </ButtonGroup>,
-    );
-
-    expect(container.querySelectorAll('button')).toHaveLength(visibleCount - 1);
-    expect(container.querySelector('span')).toHaveTextContent(
-      `${overflowStart}`,
-    );
-
-    useOverflowMock.mockRestore();
-  },
-);