jQuery UI - Why is there a dotted outline around an anchor that shouldn't be active?

Question

I'm using the dialog box modal from jQuery UI and when I open up the dialog box, the first or one of the first few anchors has a dotted line around it without me clicking on anything. Once I click anywhere on the screen it goes away. So it appears that the dialog box is activating the anchor, but how it's doing that is beyond me.

Answer 1

I'm pretty sure this dotted line just represents focus. It may be the case that jquery-ui is actually setting the focus on the first hyperlink, but (without pouring through jquery-ui source code) I think it's equally plausible that your browser is doing it on its own.

If it's the browser, I suspect it's because the dialog div is receiving the focus, and the browser's only way to deal with that is to place the focus on the first interactive thing in that div: the anchor.

What happens if there are no anchors in the dialog div? What happens if there's a text input before any anchors?

If this is something the browser's doing, do yourself a favor and stop worrying about it. You could loose a lot of time and introduce a lot of browser-specific, hard to maintain code by trying to make it behave differently.