[Bug]: Tooltips of MenuItem is not showing when open menu button by keyboard

[vinguyen12]

Component

MenuList

Package version

9.61.6

React version

18.2.0"

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 36.81 GB / 63.95 GB
  Browsers:
    Edge: Chromium (134.0.3124.66)

Current Behavior

The tooltip doesn't appear when we first open menu with keyboard.

Note:

• We've been using title prop for tooltip of menu item. There is a bug for it so we're using V9 tooltip as the solution. Quick sharing about that issue as fyi. Using title prop, when we first open menu with keyboard, the tooltip will be displayed on the top left corner. Repro video:
  

Expected Behavior

The tooltip of first item menu should appear when we first open menu with keyboard since focus is at that item.

Reproduction

https://stackblitz.com/edit/sgw1g9vv-s18eajxw?file=src%2Fexample.tsx

Steps to reproduce

Code: Have a menu button and menu list. Use V9 tooltip component for menu item.

1. Focus on menu button
2. Press "Enter" to open the menu
3. Observe => tooltip doesn't appear (missing behavior?)
4. Use arrow key down to move to next item => tooltip appear

Are you reporting an Accessibility issue?

no

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

Outlook Web

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.

[layershifter]

As I see it's related to StrictMode, it does not repro when StrictMode is disabled.

Edit: That won't be an easy fix as the source of the issue is useBrowserTimer(). If I will simplify, we call setTimeout() outside useEffect, but clearTimeout() is called inside, basically what happens:

- render1
- render2
- useEffect1
- onClickHandler: setTimeout
- useEffect2:dispose: clearTimeout // wipes the state update
- useEffect2