RocketChat / RocketChat/Rocket.Chat

Menu component uses any-typed ref with FIXME comment

Open
#38,273 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

The Menu component currently defines a ref prop as any with an explicit FIXME comment indicating it should be removed.

This results in:

  • Loss of type safety
  • Accessing internal component fields instead of the DOM element
  • Lint debt acknowledged in code

Example (current state):

ref?: any; // FIXME: remove this

and

menuRef?.base?.getBoundingClientRect()

Proposed Solution

Refactor the Menu component to use forwardRef<HTMLDivElement, MenuProps> so that:

  • The ref is strongly typed as HTMLDivElement
  • Internal component/base access is removed
  • The FIXME comment and any usage are eliminated
  • Existing subcomponents (Menu.Group, Menu.Item, Menu.Popover) continue to work unchanged

This change would be a low-risk refactor with no behavioral impact.


Expected Impact
  • Improved type safety
  • Cleaner ref handling
  • Removal of explicit technical debt
  • No UI or functional changes

Notes

I’m happy to open a PR once this approach is confirmed.


Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the TypeScript Menu component and inspect its ref prop, the FIXME comment, and the menuRef?.base?.getBoundingClientRect() usage. Check how Menu.Group, Menu.Item, and Menu.Popover are defined and used. Done means the ref is typed for HTMLDivElement, internal base access and any are removed, and those subcomponents continue working unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.