Question

I’m writing a custom form UI and currently building a select box replacement. The custom select control is basically a div with a hidden (off screen) select input in it, along with a span containing anchor elements mirroring the options of the select input:

<span class="input select">   
    <span id="select-select1" class="select-input"><span><span>This is the second option <a class="button" href="#"></a></span></span></span>    
    <span id="select-select1-options" class="select-options">
        <a value="1" href="#"><span>This is the first option</span></a>
        <a value="2" href="#"><span>This is the second option</span></a>
        <a value="3" href="#"><span>This is the third option</span></a>
    </span>    
    <select name="select1" id="select1" tabindex="2">
        <option value="1">This is the first option</option>
        <option value="2">This is the second option</option>
        <option selected="selected" value="3">This is the third option</option>
    </select>
</span>

When the user tabs to the field or clicks it, they actually give focus to the hidden select; the parent span then gets highlighted (with the addition of a CSS class) so that they can see which field has focus.

$('.input select').bind('focus', function() {

    $(this).closest('.input').addClass('focused');

}).bind('blur', function(e) {

    $(this).closest('.input').removeClass('focused');

});

However, here’s what’s happening:

1. User clicks the custom select. The span is highlighted to show it has focus, and the option anchors appear.
2. User clicks an option, and the option anchors are hidden again. But because the clicked option is an anchor, it then receives focus and the main select highlight disappears, when it should stay (because we still want the select to have focus).

So what I’m trying to achieve is that when one of the anchors in the custom select control is clicked, it doesn’t fire the blur event on the hidden select input.

What’s the best way to do this?

P.S. Sorry if this is a little confusing, it’s quite difficult to explain clearly!

Answer 1

I’m actually building a custom selectbox replacement as well as I find all the current solutions to be lacking. You can try e.preventDefault() to see if that cancels the blur event, but my preferred method is to just give focus back to the select if an anchor is clicked, with $(this).closest('input').focus();

Also, is there a reason you are giving focus to the hidden select? You can allow your span to capture focus (and respond to tabbing) by setting its tabindex:

$('.input').attr("tabindex", $('.input select').attr("tabindex") || "0");

And then prevent the hidden input from capturing focus by hiding it fully:

$('.input select').hide();