1
0 Comments

When an open source project doesn't quite fit

Recently, I needed date and time fields for my React app. When I say field, I mean something that lets you type in a date or time using your keyboard. A lot of the really nice date/time components out there are pickers, i.e., they expect the user to use a mouse (or touch I suppose). But there aren't any good ones for allowing entry with a keyboard, and I needed that specifically because my app has a focus on being optimized for keyboards.

There was one set of components that was REALLY close to what I wanted: https://github.com/wojtekmaj/react-time-picker (this is the time picker but there was also a similar date field). It uses a set of native up/down number fields but hides the arrows with CSS. It's perfect because it treats each component of a date or time as a separate field but visually, and in terms of keyboard navigation, they all look like and feel like they're part of the same field. So you can change the hour without the digits at the end running into the minutes field.

The only problem was that on Firefox, there was a pretty basic bug: once you enter a date or time once, going back and changing the number doesn't work. And it's reported as an issue and a few folks seem to have submitted PRs to fix it. But the committer doesn't seem to have the time to continue working on it.

I've run into this kind of thing before with open source components that were nearly perfect except for a small missing feature or a missing bug. In the past, I have actually copied in the code into a folder in my own project and started hacking away at it. I've often wanted to clone the repo, and managing the changes to that component separately. This has the added advantage of being able to contribute back. But this is just extra management headache that I often don't want to deal with when I just want to implement some feature quickly.

Have you all encountered this before? Do you always choose to be the open source team player, and clone into a separate repo, and create a PR back into the original? Or do you just do what I tend to do and copy the code into your own project and hack away?

By the way, at the end of the day, I ended up using https://github.com/sanniassin/react-input-mask instead to create date and time fields. This is one of the best masked input fields I've found for my use case because when you type into one of the masked "regions" (for example, into the hour "region"), it doesn't overflow digits into the other masked region. So when you're changing the hour, the digits don't overflow into the minutes. But it doesn't have the ability to use the up and down arrows within a "region" to increment the individual components by 1 or decrement by 1.

on April 30, 2021