RocketChat / RocketChat/Rocket.Chat

[Bug] : Marketplace Screenshot Carousel logic crash and global key listener leak

Open
#38,927 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Description:

The Marketplace screenshot carousel contains a critical logic error in its keyboard event handler within ScreenshotCarouselAnchor.tsx. The code attempts to execute a function for any key pressed via keysObject[onKeyDownEvent.key](). Since the object only defines ArrowLeft, ArrowRight, and Escape, pressing any other key (e.g., 'A', 'Enter', or 'Shift') results in calling undefined(), causing a JavaScript TypeError.

Furthermore, the keyboard listener is attached to the document globally and remains active even when the carousel modal is not visible, leading to unnecessary state churn and potential performance degradation.

Steps to reproduce:
  1. Navigate to Marketplace and open any app page that features a screenshot gallery.
  2. Open the Browser Console (F12).
  3. Press the 'A' key (or any non-navigation key).
  4. Observe the console error and the failure of the carousel's interactive state.
Expected behavior:

The application should only respond to defined navigation keys. Pressing an unhandled key should result in no action and zero console errors. The event listener should only be active when the carousel is actually open.

Actual behavior:

The application throws Uncaught TypeError: keysObject[onKeyDownEvent.key] is not a function.

Image
Server Setup Information:
  • Version of Rocket.Chat Server: 6.x (Dev Mode)
  • License Type: Community
  • Number of Users: 1
  • Operating System: Ubuntu 64-bit (VMware)
  • Deployment Method: Local Node.js
  • Number of Running Instances: 1
  • DB Replicaset Oplog: Enabled
  • NodeJS Version: 14.x+
  • MongoDB Version: 5.0+
Client Setup Information:
  • Browser Version: Chrome / Firefox (Latest)
  • Operating System: Ubuntu 22.04
Additional context:

The error is located in client/views/marketplace/components/ScreenshotCarouselAnchor.tsx.
Recommended Fix:

  1. Use a guard clause: if (keysObject[e.key]) keysObject[e.key]();
  2. Wrap the addEventListener in a useEffect that checks if (!viewCarousel) return;.
  3. Change the trigger Box to is='button' to improve accessibility for "Enter" and "Space" keys.
Relevant logs:

Browser Console:

Uncaught TypeError: keysObject[onKeyDownEvent.key] is not a function
    at handleKeyboardKey (ScreenshotCarouselAnchor.tsx:46)
    at HTMLDocument.onKeyDown (ScreenshotCarouselAnchor.tsx:55)

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 with client/views/marketplace/components/ScreenshotCarouselAnchor.tsx and reproduce the issue by opening a Marketplace screenshot gallery, then pressing an unhandled key such as A. Check the keyboard handler and listener lifecycle; done means unhandled keys produce no console errors and the listener is active only while the carousel is open.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.