Today I had one of the weirdest bugs of the year. With kendo combobox, whenever a dropdown arrow is clicked, the dropdown would roll up immediately and page would automatically focus on another input.

Starting with debuggers all over the place, removing all the “focus” related code from codebase, putting Event Listener Breakpoints from Chrome Dev Tool’s source tab didn’t get me anywhere. All we knew were that something triggered document’s focus handler, but Call stack is not showing anything either.

In the end, it was this question that helped: What makes it focus on any particular input; what makes the difference?

After trying to put luring inputs in various places around the template, we found that it would only cause error if put directly under one layer: <label>.

It turned out, we were wrapping a huge <label> around a bunch of inputs, just to group them together with a certain style. And somewhere between data passing, When kendo wanted jQuery to focus on the combobox input, they got confused. That makes sense. The whole point of <label> is to mark the territory of a single input only, as is the case with radio button and checkboxes.

Therefore, replacing <label> with a simple <div> worked.

What a weird bug.