DropDownList selected style when tabbing

[Aaron]

Currently we are using DropDownList throughout our application.

We have an issue getting the DropDownList's to change style when tabbing to them, leading to confusion from users because they cannot tell which element on the form is selected.

The issue is evident on the Telerik demo page: http://demos.telerik.com/aspnet-mvc/combobox/clientsideapi
If you tab to the DropDownList you will find that there is not visual alert to the user that the element is selected.

Does anyone know of a solution/work around for this issue?

Edit: I found and changed this to suit:
http://www.telerik.com/community/forums/aspnet-mvc/combobox/change-border-on-focus.aspx

But this replaces the blur/focus events and stops the normal functionality of the dropdown to work.

Cheers
Aaron

[John DeVight]

Hi Aaron,

I have the same problem and also need to implement the same functionality.  I've taken the article that you mentioned and adapted it for a dropdown.  Everything works great when I tab to the dropdown, but when I click on the dropdown to show the list, the dropdown looses focus because the focus is now on the div that displays the list of items for the dropdown.  I'm working on figuring this out and will let you know what I come up with.  Here is what I have so far:

CSS:

div.dropDownHasFocus
{
    border-width: 1px;
    border-color: Gray;
    border-style: dotted;
}

JavaScript code:

$.find('.t-dropdown').bind({
    focus: function (e) {
        $(this).addClass('dropDownHasFocus');
    },
    blur: function (e) {
        $(this).removeClass('dropDownHasFocus');
    }
});

Regards,

John DeVight

[John DeVight]

Hi Aaron,

I've gotten a bit farther with the javascript code and thought I would share.  It isn't perfect since focus is lost for a moment when the user clicks on the dropdown arrow to display the dropdown list items.

$.find('.t-dropdown').bind({
    focus: function (e) {
        $(this).addClass('dropDownHasFocus');
    },
    blur: function (e) {
        if($(this).find('input').data('tDropDownList').dropDown.isOpened()==false) {
            $(this).removeClass('dropDownHasFocus');
        }
    }
});
$.find(".t-dropdown input").each(function () {
    var dropdown=$(this).data('tDropDownList');
    dropdown.close=function (e) {
        this.dropDown.close();
        $(this.element).closest('.t-dropdown').focus();
    }
})

Hope this helps....

Regards,

John DeVight
telerikmvcextendedjs at gmail dot com

[FinallyInSeattle]

I'm looking for a solution to this issue as well as this is both a usability and accessibility issue.  The last code above gives me the error: "Microsoft JScript runtime error: Object doesn't support property or method 'bind'" on the latest version of the controls.

[FinallyInSeattle]

Is there a solution to this for the latest grid version (2011.3.1115.340)?  This version gives the error  "Microsoft JScript runtime error: Object doesn't support property or method 'bind'" on the code segment above.