[Bug]: Dropdown fires Uncaught ResizeObserver loop completed with undelivered notifications.

[eltorio]

Component

Dropdown

Package version

9.55.1

React version

18.3.1

Environment

System:
OS: macOS 15.2
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 923.43 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Safari: 18.2
npmPackages:
@fluentui/react-components: ^9.55.1 => 9.55.1
@fluentui/react-icons: ^2.0.264 => 2.0.264
@types/react: ^18.3.12 => 18.3.12
@types/react-dom: ^18.3.1 => 18.3.1
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1

Current Behavior

On a long dropdown list adjust the window with for having the value on one line, next open the dropdown.
It fires an error "Uncaught ResizeObserver loop completed with undelivered notifications."
See the video in the repository https://github.com/eltorio/ai-outlook/blob/main/_short.mov

While using as an Outook add-in it enters in an endless loop frozing outook.office.com page
For avoiding Outlook frozing I use this horrible workaround paced before react scripts

<script type="text/javascript">
        // Workaround for "ResizeObserver loop completed with undelivered notifications."
        globalThis.backupResizeObserver = { ResizeObserver: window.ResizeObserver };
        window.ResizeObserver = class ResizeObserver {
            ResizeObserver() { };
            observe() { };
            unobserve() { };
            disconnect() { };
        };
    </script>

Expected Behavior

no error

Reproduction

https://eltorio.github.io/ai-outlook/

Steps to reproduce

1. Go to https://eltorio.github.io/ai-outlook/
2. Input a real groq api key or gsk_12344567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNO
3. Resize the window for having the text in the AI Prompt dropdown fitting on a single line (see video https://github.com/eltorio/ai-outlook/blob/main/_short.mov )
4. open the AI dropdown and see the error in the console

Full code is here https://github.com/eltorio/ai-outlook the AI Dropdown is instanciate here https://github.com/eltorio/ai-outlook/blob/336cb930214b06b5b0ea4318f4ca019bd2833be2/src/aipane/components/HeroComboPrompts.tsx#L95

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has 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.

[ling1726]

I can't seem to repro this, are there any steps I'm missing?

[eltorio]

Dear @ling1726,

I apologize for any confusion caused by my previous explanation, English is not my mother language. I would like to clarify the reproduction steps. Please ensure that your browser window width is adjusted so that the text "Improve English email drafts…" fits exactly within the line limit, without wrapping to a new line. This is demonstrated in the attachment below:

I appreciate your attention to this matter.

I can reproduce here with Safari 18.2 and Edge 132.0.2941.0
Ronan

[eltorio]

[miroslavstastny]

I am still not able to repro the ResizeObserver error even when the text fits exactly one line.
We noticed another issue when the open dropdown keeps repositioning above and below in an infinite loop.

[aeltorio]

@miroslavstastny
You mus not have a vertical scrolling bar before opening the Dropdown
Here this my current config with Edge Canary

Only my serial number is masked
Same with Safari