Fixing open source bug

Contributing to open source projects is a rewarding way to give back to the community, improve your skills, and help others. Recently, I had the opportunity to fix a bug in an open-source package that was affecting multiple websites, including my own. Here’s a detailed explanation of how I discovered the issue, identified its source, and contributed a fix to the project.

It all started with my personal website, furkando.com. I noticed an issue: rapidly clicking the drawer trigger caused the drawer’s state to get messed up, failing to return to its original state. It was slightly frustrated so I decided to dig deeper.

To ensure it wasn’t just a problem with my site, I checked sazak.io, which was built using the same template. The same issue was present there. This confirmed that the problem wasn’t isolated to my code but was likely in a shared component.

Both websites used the shadcn/ui drawer component, which in turn relied on a package called vaul. Since vaul is open source, I decided to explore its code to see if I could pinpoint the issue.

Upon inspecting the vaul package, I found the bug within the set and reset functions, which managed the drawer’s styles. The functions didn’t properly cache and restore styles during rapid state changes, leading to the inconsistent behavior.

Here’s the problematic code snippet I identified:

I revised the code to ensure styles were cached correctly and only once:

After testing the fix locally, I submitted a pull request to the vaul repository: GitHub PR #371. In the meantime, I updated my project’s package.json to use my forked version of vaul that included the fix:

This experience was a great reminder of the power of open source and the collaborative nature of software development. By contributing to vaul, I was able to not only fix an issue affecting my websites but also help others who might encounter the same problem. If you’re interested in contributing to open source, I highly encourage you to dive in—you never know how your skills and insights might make a difference!