[Bug]: Fluentui v8 TooltipHost does not open when hovered/focused when running with vite run

[rcbevans]

Describe the bug

When serving my react project with vite run Fluentui v8 TooltipHosts do not show their content on mouse over/focus as they should.

They do show correctly when running a production build produced by vite build.

I also created an issue against fluentui because I'm not sure if the issue is in that library, or vite specifically.

Reproduction

https://stackblitz.com/edit/vitejs-vite-rrim5b?file=src/App.tsx

Steps to reproduce

Create a new vite react project, and add "@fluentui/react": "8.107.1".

Add a TooltipHost component to the app, e.g

import { TooltipHost } from '@fluentui/react';

...

    <div className="App">
      <div
        onMouseEnter={() => console.info('Normal Div onMouseEnter')}
        onMouseLeave={() => console.info('Normal Div onMouseLeave')}
      >
        Normal Div
      </div>
      <TooltipHost
        onMouseEnter={() => console.info('TooptipHost onMouseEnter')}
        onMouseLeave={() => console.info('TooptipHost onMouseLeave')}
        content={<div>You did it!</div>}
      >
        <div>Hover me</div>
      </TooltipHost>
    </div>

On keyboard focus or mouse over, the TooltipHost should reveal a callout with the text "You did it!", but when running under vite run the callout does not show.

Observe that the onMouseEnter and onMouseLeave events fire correctly for the regular div, but do not fire on the TooltipHost when running in vite run, but they do when running a production build. These events are what the TooltipHost is using to determine when to show the callout.

System Info

System:
    OS: Linux 6.2 Pop!_OS 22.04 LTS
    CPU: (48) x64 AMD Ryzen Threadripper 3960X 24-Core Processor
    Memory: 39.87 GB / 62.66 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Firefox: 111.0.1
  npmPackages:
    @fluentui/react: 8.107.1 => 8.107.1 
    @fluentui/react-hooks: ^8.6.20 => 8.6.20 
    @fluentui/react-icons-mdl2: ^1.3.37 => 1.3.37 
    @fluentui/react-shared-contexts: ^9.3.3 => 9.3.3 
    @fluentui/theme: ^2.6.25 => 2.6.25 
    @vitejs/plugin-react: ^3.1.0 => 3.1.0 
    vite: ^4.2.1 => 4.2.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-rrim5b (Open reproduction)

[sapphi-red]

This seems to be a bug in fluentui.
If I removed strict mode, it worked.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
    <App />
-  </React.StrictMode>
);

[rcbevans]

Thanks for looking into it @sapphi-red.

Can you offer any insights into what behavior StrictMode is changing in react under vite run specifically which could explain how the fluentui component is broken under run but not a production build?

[sapphi-red]

I'm not so familiar with react. But I guess it's something related to things written around here.
https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development