Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 4.38 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Browsers:
    Chrome: 102.0.5005.115
    Firefox: 101.0.1
    Safari: 15.5

My project uses PNPM so envinfo might have missed: @fluentui/react-components v9.0.0-rc.14

Are you reporting Accessibility issue?

no

Reproduction

https://github.com/OfficeDev/fluent-blocks/tree/feat/sample-app

Bug Description

Actual Behavior

The Provider won’t apply styles in certain situations when it’s been rehydrated. Sometimes when hot reloading certain styles aren’t applied, and certain styles are always missing from tooltips and menus which v9 renders in a sibling provider with a different-numbered class name from the primary provider (e.g. the primary will have fui-FluentProvider1, but tooltip & menu providers will have fui-FluentProvider2).

This could possibly be construed as an accessibility bug since it causes tooltips & menus to blur and unmount right after mounting.

Expected Behavior

In Storybook and other SPA situations the Provider behaves as expected – it seems aware that other providers have been rendered, and when new tooltips or menus appear they appear in a provider element with the same n in their class name as their relevant provider sibling, e.g. 57 in fui-FluentProvider57.

Steps to reproduce

I'm working on getting a truly minimal reproduction running on Vercel (this can’t be reproduced on CodeSandbox since it’s an SSR issue) but wanted to log this in case I missed something and this is easily resolved.

Logs

> @fluent-blocks/[email protected] dev /Users/willshown/Projects/fluent-blocks/packages/react-sample-app
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 5.7s (2167 modules)
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 1479 ms (2174 modules)

Requested priority

High

Products/sites affected

Fluent Blocks, Teams Developer Portal

Are you willing to submit a PR to fix?

yes

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.