Fix: centralize event listener management and cleanup on component destruction

[charuljain02]

🐛 Problem
Event listeners (including document-level keydown listeners) were attached
during initialization but were not removed when the component was destroyed.
This caused potential memory leaks and unexpected behavior when the component
was mounted/unmounted multiple times (e.g. in SPAs or React apps).

✅ Solution

• Introduced centralized event listener tracking
• Ensured all document/window and element-level listeners are removed on destroy()
• Removed duplicate destroy() method that was preventing proper cleanup
• No changes to existing UI, share URLs, or modal HTML logic

🧪 Testing

• Verified modal opens/closes correctly
• Verified ESC key works without duplicate triggers
• Verified no visual or functional regressions

Summary by CodeRabbit

• New Features

  • ESC key now closes the social share modal when open.

• Refactor

  • Improved internal event management and resource cleanup lifecycle for better stability.

#3

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The SocialShareButton class is refactored to introduce a centralized event listener management system. All direct addEventListener calls are replaced with an internal registry pattern using addListener() and removeAllListeners() methods, and a new destroy() method provides comprehensive lifecycle cleanup including DOM node removal and listener deregistration.

Changes

Cohort / File(s)

Summary

Event Listener Management System src/social-share-button.js

Introduces _listeners internal storage and three new methods: addListener(target, type, handler, options) for centralized event registration, removeAllListeners() for bulk deregistration, and destroy() for lifecycle cleanup. All event handlers (button click, modal overlay, close button, platform buttons, copy button, input click, ESC key) are now wired through the registry instead of direct addEventListener calls. DOM nodes are removed and body overflow is reset during destruction.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🐰 Events once scattered, now gathered with care,
A listener registry, so tidy and fair,
When destroy is called, cleanup's complete,
No leaked listeners left to defeat! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately summarizes the main change: centralizing event listener management and adding cleanup on destruction, which matches the core refactoring described in the changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[kpj2006]

lgtm

however before merging we need to test it,
for that clone any of our frontend repo, identify its tech stack. based on that try to add Social-share-button by using readme of share-button repo.
but you need to manually import the social button because the README uses a CDN, which you won’t be able to change until I merge your PR into the main branch.

once done, share screenshots and recording with us.

[kpj2006]

see one of my tutorial for stablepay which is using next.js for frontend:

https://www.youtube.com/watch?v=cLJaT-8rEvQ
(this contain cdn but you need to manually import from social button repo)

[kpj2006]

i am happy if you could pick-up any other tech-stack excluding Next.js (app router) with customize button functionality so that we can add your tutorial in readme which help other devs too.

i am opening another issue, asking for tutorial. you can submit your tutorial there too.

[charuljain02]

Hi! @kpj2006 Sorry for the delayed reply.

I was debugging the issue and set up a small React (Vite) test project to reproduce the behavior by manually importing the SocialShareButton from the repository instead of using the CDN.

I verified the functionality including:
• opening the share modal
• closing via overlay and close button
• closing using the ESC key (keydown event)
• cleanup using destroy()

I’ve attached a short recording showing the ESC behavior and the button working correctly in the test environment.

Please let me know if any additional testing or changes are needed. Thanks for your patience!

social-share-button.mp4

[kpj2006]

join discord(link is in readme at top) discuss there.