The Jumping Form Cursor

My friend was working on one of those websites, old, hacked up, unmaintained and dumped-in-your-lap. This are notoriously difficult to work with, the owners only see the surface level and are therefore unwilling to scrap something that looks to be running perfectly on the surface. These sites are a lot like the Indestructible Mr. Burns. They are incredibly unhealthy, but all the ailments are in a perfect balance so you are wary to disrupt anything lest the whole house-of-cards collapse. Debugging them is always tricky, they are usually documented only in the head of four developers ago, and are a spaghetti mess. To make things more complicated this site was an older attempt at a single-page app, which was really just a bunch of javascript, frames and everything all over each other.

The problem here was centered on a single input form. On some browsers, the cursor would jump to the first input field (a text input) whenever you tried to input into any other field in the same form. So began the process figuring out just what this bug was about. First step is always to try and isolate/narrow the problem, debugging is the art of narrowing possibilities. In the case of a bug like this, I am first thinking it may be some browser quirk, so test it across browsers, see if it is more than that. So I asked which browser my friend was using, and it was his Chrome. Most current? "Yes." First replication attempt was with my local Chrome and I could not replicate the problem. That is strange, since my friend was also using current Chrome. So I tried my local Firefox, yes, problem replicated. This did not sit well. You can get bugs between browsers, but in same versions of the same browser? That has the potential to get very nitty gritty, then you need to start looking at extensions and all sorts of other things that may make the same "version" really not the same. But I did not want to dive down that rabbit hole just yet, so I filed it away as a factoid to be used later as there were still a few other things to try first.

My next thought was "cursors jumping elsewhere when I click on something", this sounds awfully javascripty. Important to note that this site is a mess of javascript. Inline, externally-included, in-attribute, Dreamweaver (MM_ugh), and it was everywhere. This could be an easy and obvious answer. Quick search through everything for anything remotely resembling a onclick, or with the word 'focus' in it. A few, seemingly unrelated results. Before getting deeper into this part of the debugging search tree I wanted to see if it really had anything to do with Javascript, so I traded the scalpel for a sledgehammer, and did a total site wide Javascript disable. With no Javascript enabled at all, the trouble continued. This was actually a good thing since I could now generally rule out Javascript event handling as the cause of the problem.

I wanted to see a little more about what was actually happening in the problem. What was really causing the cursor to jump, the act of focusing on an input item (causing it to be the active item to receive my input) or the act of clicking to give focus to another input item. This was easy to determine: tabbing through the form inputs never jumped the cursor back to the top. That is a helpful isolation, the problem is a mouse click. Just a mouse click and no javascript.

This processing of peeling back possibilities opens up new avenues which may have otherwise been obvious. A little googling and I turned up an interesting tidbit, something I did not before realize: When a LABEL element receives focus, it passes the focus on to its associated control.. I don't think I realized this before, but knowing this made my next hypothesis easy. I guessed that the first form label (who's control input field kept getting the cursor) was not properly closed. Therefore a click on any sub-element was also causing the focus to jump to the that labels input because all the rest of the form was contained in that first label. Sure enough that was it.

This seems like it took a long time, but in reality I did all of this in a few minutes. I was taking these steps almost thoughtlessly as fast as I manipulate my machine to perform the steps. This is one of those places where experience matters. You are able to see the developing patterns of problems encountered in the past and those turn into subtle clues (and gut feelings) guiding your next steps. This would have taken much longer had I encountered it fresh out of school.