Radio button not selected when mouse-clicked?

Issue

For some reason if I tab through my radio buttons (and use the arrow keys to select different ones) the current radio button is selected. I can tell because there's a blue highlight circle around it (Google Chrome). But if I click a radio button with the mouse, that blue circle is not there.

The problem is that I'm trying to create a smooth tab flow through my page. If the user uses nothing but tab and arrow keys, it works fine. If they use nothing but the mouse, it works fine, obviously (because tabIndex would be irrelevant). But if they click a radio button with the mouse, and then press tab, it fails. Specifically, it tabs to the first element on the page, rather than tabbing to the next element after the radio button. Any ideas?

Solution

I think I figured it out. The word I was looking for was 'focus'. Mouse-clicking a radio button doesn't seem to give the button focus. It removes focus from any element, kind of like clicking in the background. My solution was to call a javascript function to the onclick event that assigns focus to the radio button using focus().

Answered By - user617123