Set focus resetting while in update panel and ajax modalpopup

  •  08-28-2009, 11:23 AM

    Set focus resetting while in update panel and ajax modalpopup

    Hi,
     
    I'm using Cute Editor 6.4 and encountered a bug with cuteeditor resetting my focus because of it's loading. This only happens in IE 6.
     
    Basically I initially set focus on an input field on the main page. After I click a  button to open a modal popup I set the focus to another input field on the popup. However, after Cute Editor finishes loading the focus gets set back to the field on the main page.
     
    The focus setting works completely fine if I'm don't have a Cute Editor in the modal popup or if I'm not using an update panel for asynchronous postback.
    Below is an example page that can reproduce the bug.
    1. <%@ Page Language="vb" AutoEventWireup="false" %>   
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    4. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>   
    5. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>   
    6. <html xmlns="http://www.w3.org/1999/xhtml">   
    7. <head runat="server">   
    8.   
    9.     <script type="text/VB" runat="server">   
    10.         Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load   
    11.             Page.SetFocus(txtMain)   
    12.         End Sub  
    13.   
    14.         Private Sub btnShow_Click(ByVal sender As ObjectByVal e As System.EventArgs) Handles btnShow.Click   
    15.             modalExtender.Show()   
    16.             Page.SetFocus(txtName)   
    17.         End Sub  
    18.     </script>   
    19.   
    20.     <style type="text/css">   
    21.         /*Modal Popup*/.modalBackground   
    22.         {   
    23.             background-color: Gray;   
    24.             filter: alpha(opacity=70);   
    25.             opacity: 0.7;   
    26.         }   
    27.         .modalBox   
    28.         {   
    29.             width: 700px;   
    30.             text-align: center;   
    31.             background-color: #ffffff;   
    32.             padding: 1px 0px;   
    33.         }   
    34.     </style>   
    35.     <title></title>   
    36. </head>   
    37. <body>   
    38.     <form id="form1" runat="server">   
    39.     <cc1:ToolkitScriptManager ID="scriptMgr" runat="server" CombineScripts="true">   
    40.     </cc1:ToolkitScriptManager>   
    41.     <asp:UpdatePanel ID="updMain" runat="server" UpdateMode="Conditional">   
    42.         <ContentTemplate>   
    43.             <div>   
    44.                 <asp:TextBox ID="txtMain" runat="server"></asp:TextBox>   
    45.                 <asp:Button ID="btnShow" runat="server" Text="Show popup" />   
    46.             </div>   
    47.             <asp:Panel ID="pnlPopup" runat="server" Style="display: none;" meta:resourcekey="pnlPopupResource1"  
    48.                 CssClass="modalBox">   
    49.                 <table style="width: 80%;">   
    50.                     <tr>   
    51.                         <td>   
    52.                             <asp:Label ID="lblName" runat="server" AssociatedControlID="txtName" Text="Name:"  
    53.                                 meta:resourcekey="lblNameResource" />   
    54.                         </td>   
    55.                         <td>   
    56.                             <asp:TextBox ID="txtName" runat="server" MaxLength="100" Style="width: 450px;" />   
    57.                         </td>   
    58.                     </tr>   
    59.                     <tr>   
    60.                         <td>   
    61.                             <asp:Label ID="lblInquiry" runat="server" AssociatedControlID="ceInquiry" Text="Message:"  
    62.                                 meta:resourcekey="lblInquiryResource" />   
    63.                         </td>   
    64.                         <td>   
    65.                             <CE:Editor Width="455" Height="250" ID="ceInquiry" EditorOnPaste="PasteWord" AutoConfigure="Simple"  
    66.                                 runat="server" ShowBottomBar="true" MaxHTMLLength="4000" ShowWordCount="true"  
    67.                                 ShowHtmlMode="true" ShowPreviewMode="false" ShowTagSelector="false" Focus="false">   
    68.                             </CE:Editor>   
    69.                         </td>   
    70.                     </tr>   
    71.                     <tr>   
    72.                         <td style="text-align: right;" colspan="2">   
    73.                             <asp:Button ID="btnCancel" runat="server" CausesValidation="False" Style="width: auto;"  
    74.                                 Text="Cancel" />   
    75.                         </td>   
    76.                     </tr>   
    77.                 </table>   
    78.             </asp:Panel>   
    79.             <asp:Button ID="btnDummy" runat="server" Style="display: none;" meta:resourcekey="btnDummyResource1" />   
    80.             <cc1:ModalPopupExtender ID="modalExtender" runat="server" TargetControlID="btnDummy"  
    81.                 PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DynamicServicePath=""  
    82.                 Enabled="True" />   
    83.         </ContentTemplate>   
    84.     </asp:UpdatePanel>   
    85.     </form>   
    86. </body>   
    87. </html>  

    Thanks in advance

View Complete Thread