Toolbar Button Outline

[Lannity]

I've noticed in Firefox 3.6.16 that after I click a noncheck button on the toolbar meant for single clicking purposes, an outline is formed around the button, and doesn't go away until I click somewhere else on the browser.  Is there a way to make it so the button doesn't stay outlined after I click it, so that it merely goes back to how it looked before it was clicked.  I've also noticed this doesn't happen in Internet Explorer.

[Helen]

Hello Lannity,

Do you reproduce the problem at our online examples:
http://demos.telerik.com/aspnet-ajax/toolbar/examples/overview/defaultcs.aspx?

Regards,
Helen
the Telerik team

[Lannity]

The problem gets reproduced in Firefox 3.6, but not in Internet Explorer.  I need this to function correctly in Firefox 3.6 because the user base interested in using your AJAX interface primarily uses Firefox. 

Here's a link to a flash video file I made illustrating the problem right off your own demo site:  ToolBar Button Hover Issue
I recorded the video off my desktop so that it focuses on the ToolBar demo.

In it you'll see the buttons stay hover highlighted after being clicked, and the effect only goes away after having clicked in some other area of the browser window.

[Helen]

Hello Lannity,

Thank you for the additional information. It helped us to see the issue locally.
One possible solution is to attach to the OnClientButtonClicked event and reset the button css class:

<telerik:RadToolBar ID="radToolBarMenu"
runat="server"
Skin="Outlook"
OnClientButtonClicked="buttonClicked">
   <Items>
        .........................
    <telerik:RadToolBarButton runat="server" Text="Internal">
        </telerik:RadToolBarButton>
   </Items>
</telerik:RadToolBar>


<script type="text/javascript">
    function buttonClicked(sender, args) {
    var itemCss = "rtbItem rtbBtn";
    args.get_item().get_element().className = itemCss;
    }
</script>

Hope this helps.

Regards,
Helen
the Telerik team

[Lannity]

How will this work with two state toggle buttons such as the second one from the left shown in the demo?  If I use the your provided code to reset the hover state of such a button, will it ensure that the state of the button (clicked/not clicked) stays the same?

[Helen]

Hi Lannity,

Please find bellow a better workaround:

<telerik:RadToolBar ID="radToolBarMenu" runat="server" Skin="Outlook" OnClientButtonClicked="buttonClicked">
            <Items>
               <telerik:RadToolBarButton runat="server" Text="Internal">
               </telerik:RadToolBarButton>
               <telerik:RadToolBarButton Text="Toggle button" CheckOnClick="true" Checked="true" AllowSelfUncheck="true" />
            </Items>
        </telerik:RadToolBar>

        <script type="text/javascript">
            function buttonClicked(sender, args) {
                    args.get_item().blur();
            }
        </script>

Otherwise I logged the bug in our bug tracking system and our developers will look into it.

Kind regards,
Helen
the Telerik team