[Bug]: Pivot with overflowBehavior={"menu"} does not work with display styling

[rogerprz]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.65 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 113.0.5672.126
    Edge: 113.0.1774.35
    Firefox: 107.0.1
    Safari: 16.4

Replace the pivot section with the snippet below to reproduce error:
Section: Pivot with overflow menu

   <Pivot
          aria-label="Pivot Overflow Menu Example"
          linkFormat={tabs ? 'tabs' : 'links'}
          overflowBehavior={'menu'}
          overflowAriaLabel="more items"
          style={{display: 'flex'}}

        >
          <PivotItem headerText="My test"/>
          <PivotItem itemCount={23} itemIcon="Recent">
          </PivotItem>
          <PivotItem headerText="Placeholder" itemIcon="Globe">
          </PivotItem>
          <PivotItem headerText="Shared with me" itemIcon="Ringer" itemCount={1}>
          </PivotItem>
          <PivotItem headerText="Custom Renderer" itemIcon="Airplane" onRenderItemLink={_customRenderer}>
          </PivotItem>
          <PivotItem headerText="This tab has a relatively long title">
          </PivotItem>
          <PivotItem headerText="Short">
          </PivotItem>
          <PivotItem headerText="The Last Tab"/>
        </Pivot>

Are you reporting Accessibility issue?

yes

Reproduction

1. Go to fluent pivot
2. Navigate to section mentioned
3. Open code editor
4. Paste example
5. Open console log
6. make screen width smaller

Bug Description

Actual Behavior

When you add a css style, flex or grid, or any kind. the overflow does not work.

Expected Behavior

For overflow menu to appear when screen width is not able to cover all the pivots that the pivot gets moved to the oveflow menu.

Paste the following into your sandbox for Pivot with overflow menu

   <Pivot
          aria-label="Pivot Overflow Menu Example"
          linkFormat={tabs ? 'tabs' : 'links'}
          overflowBehavior={'menu'}
          overflowAriaLabel="more items"
          style={{display: 'flex'}}

        >
          <PivotItem headerText="My test"/>
          <PivotItem itemCount={23} itemIcon="Recent">
          </PivotItem>
          <PivotItem headerText="Placeholder" itemIcon="Globe">
          </PivotItem>
          <PivotItem headerText="Shared with me" itemIcon="Ringer" itemCount={1}>
          </PivotItem>
          <PivotItem headerText="Custom Renderer" itemIcon="Airplane" onRenderItemLink={_customRenderer}>
          </PivotItem>
          <PivotItem headerText="This tab has a relatively long title">
          </PivotItem>
          <PivotItem headerText="Short">
          </PivotItem>
          <PivotItem headerText="The Last Tab"/>
        </Pivot>

Logs

n/a

Requested priority

Blocking

Products/sites affected

Coherence-Design-System

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[micahgodbolt]

Adding flex to the root container makes the inner container not able to calculate the width properly, as flex makes it only fill the space it is given. What are you trying to do with a flex displayed Pivot?

[rogerprz]

The flex is on the parent container. For pivot we have this < 1 2 3 4 5 > Where flex or grid, or essentially any other option of display will not allow overflow be moved to overflow button. At 400% zoom or smaller width display I would think the pivot should capture the innerWidth and if Pivot is smaller than innerWidth overflow would also get triggered.

I had to set display to inline-grid with a max width. So it should still be triggered with a min width is reached.

Here's a reduced version of what my team has implemented.

 <div className={classNames.root}>
      <div className={classNames.pageControls}>
           <SvgIconButtonShim
            styles={classNames.subComponentStyles.previousButton()}
            iconProps={previousIconProps}
            onClick={handlePreviousClick}
            {...previousPage}
          />
        <Pivot
          className={classNames.pivots}
          selectedKey={currentPage.toString()}
          onLinkClick={onPivotClick}
          linkSize="normal"
        >
          {buildPivotControls(currentPage, pages)}
        </Pivot>
    <ComboBox
              id="comboBoxDropdown"
              componentRef={comboBoxRef}
              ref={comboBoxHTMLRef}
              dropdownWidth={pageDropdownWidth}
              styles={classNames.subComponentStyles.comboBox()}
              ariaLabel="Dropdown pages input"
              selectedKey={currentPage}
              options={dropdownList(pages)}
              onChange={handleOnDropdownChange}
              caretDownButtonStyles={classNames.subComponentStyles.caretDownButtonStyles()}
              calloutProps={{
                calloutMaxHeight: 342,
                ...pageDropdownCalloutProps
              }}
            />
      <SvgIconButtonShim
            styles={classNames.subComponentStyles.nextButton()}
            iconProps={nextIconProps}
            onClick={handleNextClick}
            buttonAs={IconButton}
            svgIconsEnabled={theme?.svgIconsEnabled}
          />
      </div>
      <div className={classNames.itemsPerPage}>
          <ComboBox />
          <Text styles={classNames.subComponentStyles.itemsPerPageText()}>
            {itemsPerPageProps.text || 'Items per page'}
          </Text>
      </div>
</div>

[rogerprz]

Any update?

[msft-fluent-ui-bot]

This issue has been marked as being beyond the support scope of Fluent UI's issues board. It will now be closed automatically for house-keeping purposes.

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.