RocketChat / RocketChat/Rocket.Chat
[Bug] : Marketplace Screenshot Carousel logic crash and global key listener leak
Nobody has claimed this yet.
- 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:
- Navigate to Marketplace and open any app page that features a screenshot gallery.
- Open the Browser Console (F12).
- Press the 'A' key (or any non-navigation key).
- 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.
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:
- Use a guard clause:
if (keysObject[e.key]) keysObject[e.key](); - Wrap the
addEventListenerin auseEffectthat checksif (!viewCarousel) return;. - Change the trigger
Boxtois='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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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