ClientItemTemplate with ajax autopostback in IE8

[Rob]

My picture dropdown is requiring two tab key presses after selecting a value only in IE8 (works fine in IE7, IE9, FF, Chrome, Safari).

I've removed the client side event and commented out all of server side code in the postback event and the control still requires two tabs to leave the field after selecting a value.  If you don't change the value you can correctly tab through the field.

<telerik:RadComboBox LabelText="Occupancy:" LabelWidth="175px" Width="200px" Height="340px" DropDownWidth="260px" ID="vcbxOccupancy" OnSelectedIndexChanged="vcbxOccupancy_SelectedIndexChanged" AutoPostBack="true" OnClientSelectedIndexChanged="OccupancyType_OnChanged" runat="server" >

<ClientItemTemplate>

    <div style="font-size: 15px; font-weight: bold;">#=Text#</div>

    <div style="height: 136px; background: url(../App_Themes/common/Images/OccTypes.jpg) 0px #= Attributes.Offset #px no-repeat;"></div><br />

</ClientItemTemplate>

</telerik:RadComboBox>

 

 

 

[Peter Filipov]

Hi Rob,

I tried to replicate the described case and everything is working fine at my side. Could you please try to setup a runnable project which reproduces the issue? A record what exactly happens at your side will be really helpful. Also I noticed that you haven't set the tabindex property of the control.

Regards,
Peter Filipov
Telerik

[Rob]

This is using the 2012.2.607.35 version of the control. 
Actually happens in more browsers then I thought before. 
When you select a value from the drop down with the keyboard and press the tab
key it doesn't leave the field.  You have to press tab again to leave the field.

Here is the code up front:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo._Default" %>

 

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

 

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

   <telerik:RadScriptManager ID="ScriptManager" runat="server" />

 

   <h2>Welcome to Telerik combobox tab issue!</h2>

   <asp:Label ID="lblMsg" runat="server" /><br />

 

   <input type="text" id="before" /><br />

   <telerik:RadComboBox ID="test" OnSelectedIndexChanged="test_SelectedIndexChanged" AutoPostBack="true" OnClientSelectedIndexChanged="test_OnChanged" runat="server" >

      <Items>

         <telerik:RadComboBoxItem Text="Select a Value" Value="" />

         <telerik:RadComboBoxItem Text="One" Value="One" />

         <telerik:RadComboBoxItem Text="Two" Value="Two" />

         <telerik:RadComboBoxItem Text="Three" Value="Three" />

      </Items>

   </telerik:RadComboBox><br />

   <input type="text" id="after" /><br />

 

   <telerik:RadAjaxManager ID="AjaxManager" EnablePageHeadUpdate="false" runat="server" ></telerik:RadAjaxManager>

 

   <script type="text/javascript">

      function test_OnChanged() {

      }

 

   </script>

</asp:Content>

Here is the code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using Telerik.Web.UI;


namespace Demo
{
   public partial class _Default : System.Web.UI.Page
   {
      protected void Page_Load(object sender, EventArgs e)
      {

      }

      protected void Page_PreRender(object sender, EventArgs e)
      {
         AjaxManager.AjaxSettings.AddAjaxSetting(test, lblMsg);
      }

      protected void test_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
      {
         lblMsg.Text = e.Text;
      }

   }
}

[Peter Filipov]

Hi Rob,

The described behavior appears only on IE9 after the ajax call was made. To avoid the unnecessary TAB pressing try to set the focus of the next control in the code behind:

<telerik:RadComboBox ID="test" OnSelectedIndexChanged="test_SelectedIndexChanged" AutoPostBack="true"  OnClientBlur="OnClientBlur"
    OnClientSelectedIndexChanged="test_OnChanged" RenderMode="Lightweight"
    runat="server" >
   <Items>
      <telerik:RadComboBoxItem Text="Select a Value" Value="" />
      <telerik:RadComboBoxItem Text="One" Value="One" />
      <telerik:RadComboBoxItem Text="Two" Value="Two" />
      <telerik:RadComboBoxItem Text="Three" Value="Three" />
   </Items>
</telerik:RadComboBox><br />
<input type="text" id="after" runat="server"/><br />

protected void test_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

   lblMsg.Text = e.Text;

   Page.SetFocus(after.ClientID);

}

Regards,
Peter Filipov
Telerik