Select Replacements

They suck.



The dropdowns don't match our new style.

You sigh.

I understand the appeal, I really do. Unlike most controls, support for the select element differs across browsers. One of the most glaring issues being that you can't style them... kinda. Which means your "art-deco inspired" bootstrap style has this eye-sore featured prominently as the user selects their oddly common January 1st birthday. In addition, the promises of easy sorting and searching is alluring.

But really, they are horrible and you shouldn't use them. Having both been on projects on which I was told to use them and having implemented them on personal projects, I must attest to this. More than attest, I almost make it a policy to strip them out whenever possible.

They have two fundamental issues.

Not an Issue - They require Javascript.

I don't consider this an issue. Some purists would scream that Javascript is a raging pandemic that has burdened our web with unnecessary complexity. Logically, wiring up Javascript to recreate a native element is absolutely retarded.

But I've seen things... like people positioning items on a page with Javascript. I consider it a far larger problem when a website's layout is broken because I won't load tracking scripts. CSS exists to style. If you are placing objects with Javascript: I hate you.

It's like Pandora's Box, just more depressing. Everything requires Javascript. Move on.

Issue 1 - They have bugs.

All software has bugs. But older software has less bugs, or at least bugs that are well-known.

People forget how long the HTML standard and its implementations have been being worked on. Tim Berners-Lee put out the original specification when I was shitting my pants. For example, do you remember the bug with select boxes and floating divs? Probably not, because it was seven years ago. Or what about the undefined behavior where Firefox saved your last selected option?

Select replacements haven't had these growing pains nor do they have the developer support to fix them. Generally they are run by one guy who thought it would be a fun project. Guys like me who release horribly buggy software because they want to go drink already.

For example, jQuery-editable-select has a particularly annoying bug where on_select events fire twice. When I used select2 a while back, it had an annoying bug where the current value wouldn't be correct when the elements were added dynamically through ajax. This leads into the second issue.

Issue 2 - Coding around bugs.

Generally it is considered bad practice to branch and modify external libraries. So that leaves you with in-product work-arounds.

So now your sleek new library requires boilerplate code to make it function as expected. Inevitably you then get a bug report in which the quickest fix is to mix view and control logic. No longer is your select replacement a drop-in widget but rather a dependency. Repeat the cycle and you get this homegrown monstrosity which is almost impossible to strip out once the amount of the bugs become overwhelming.

And then you give up and rewrite the codebase.

This is what happens when you use select replacements.