Skip to content

[Bug]: Combo Box Free Form Popup doesn't Scroll Correctly #35701

@LauraAlspaugh

Description

@LauraAlspaugh

Component

Combobox

Package version

9.72.3

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
    Memory: 21.91 GB / 63.71 GB
  Browsers:
    Chrome: 144.0.7559.96
    Edge: Chromium (140.0.3485.66)
    Firefox: 144.0 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.7309
  npmPackages:
    @fluentui/react: 8.124.0 => 8.124.0
    @fluentui/react-components: ^9.72.3 => 9.72.3
    @fluentui/react-icons: ^2.0.307 => 2.0.313
    @fluentui/react-northstar: 0.66.5 => 0.66.5
    @types/react: ^18.3.1 => 18.3.26
    @types/react-dom: ^18.3.1 => 18.3.7
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1

Current Behavior

When the combo box is set to freeform, typing in a long value creates a weird and jumpy horizontal scroll behavior when trying to view that value from the list-box. Trying to scroll to the right, causes the scroll bar to jump back to its original position.
I wasn’t able to reproduce this issue in a Code Sandbox or the Fluent example sandboxes. The bug occurs only in my project.

Expected Behavior

As seen in the docs example, scrolling to the right in the list-box should behave as a regular scrollbar does, and allow the user to view all of the content.

Reproduction

https://landiscomputer-my.sharepoint.com/:v:/g/personal/laura_landistechnologies_com/IQCF_vTNIf-mT6nE9zypPE4SAYpR3H5MDkB4AcmBUkjp3Zg?e=GfC5FW

Steps to reproduce

  1. In the combo box, type in a long value so that the dropdown scrolls.
  2. Open the dropdown, and try viewing the value.
  3. Scrolling to the right, causes the scrollbar to jump horizontally.

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions