I’m using a modal popup with a login control (but just a textbox has same issue) which works ok in IE. When I test using Firefox the textbox will not get focus. I can’t place the cursor in the textbox however other controls (buttons and checkbox) work ok. The modal popup is being displayed via code behind or via button click with same issue and panel has an update panel surrounding the controls (textbox or login control). The site has a master page.

I am hope that someone has a workaround or at least some suggestions for this issue.

Here is some sample markup which produces this issue...

            <asp:ImageButton ID="btnLoginCancel" BackColor="transparent" runat="server"

            <asp:Login ID="Login1" runat="server" TitleText="Login" LoginButtonText="Submit"

                       RememberMeSet="true" RememberMeText= "Remember me next time."

                       FailureText="Login failed! Please try again." 

                       OnLoggedIn="LogedIn"

       </asp:UpdatePanel>

       <asp:Button ID="btnLoginNewUser" Text="New user registration." 

                   BorderStyle="None" BackColor="transparent" OnClick="btnLoginNewUser_Click"

                   style=" background-image:url(Images/IconLib/user1_(add)_16x16.gif);

                           background-repeat:no-repeat; float:left;  text-decoration:underline;

       <asp:Button ID="btnLoginRecoverPassword" Text="Recover my password." 

                   BorderStyle="None" BackColor="transparent" OnClick="btnLoginRecoverPassword_Click"

                   style=" background-image:url(Images/IconLib/access_16x16.gif);

                           background-repeat:no-repeat; float:left;  text-decoration:underline;

As it turns out; I can type data into the textbox (login control) but the cursor does not blink when the focus is on the textbox. There is no indication to the user that the textbox has focus.

I attempted to surround the controls with a <div> and with overflow style prop set to 'hidden' - same issue.
I also attempted to remove the update panel and drag pannel - same issue.

The site that I am working on has many themes and removing all css overflow properities is not a good fix.

After reading a bugzilla report and some other posts on this site, this issue appears to be a FireFox bug. Any suggestions or additional insight would be greatly appreciated.

The Login control is not compatible inside of updatepanels (unless its been converted to an editable template, which yours has not).  If you are trying to avoid refreshes, consider doing your authentication on the client-side.

http://disturbedbuddha.wordpress.com/2007/11/19/a-client-side-ajax-login-for-aspnet/

Thanks DisturbedBuddha,

But... The Login Control is not the issue. Logging in with the Login Control inside the ModalPopupExtender works great for me.

Please note that this is an issue with any textbox control inside a ModalPopupExtender and with FireFox.

if you want to show focus, try this:

In the Page, not the MasterPage:

1    public clas YourPage :  System.Web.UI.Page
2    { 
4            private static void SetInputControlsHighlight(Control container, string className, bool onlyTextBoxes)
5            {
6                foreach (Control ctl in container.Controls)
7                {
8                    if ((onlyTextBoxes && ctl is TextBox) || ctl is TextBox || ctl is DropDownList ||
9                        ctl is ListBox || ctl is CheckBox || ctl is RadioButton ||
10                       ctl is RadioButtonList || ctl is CheckBoxList)
11                   {
12                       WebControl wctl = ctl as WebControl;
13                       wctl.Attributes.Add("onfocus", string.Format("this.className = '{0}';", className));
14                       wctl.Attributes.Add("onblur", "this.className = '';");
15                   }
16                   else
17                   {
18                       if (ctl.Controls.Count > 0)
19                           SetInputControlsHighlight(ctl, className, onlyTextBoxes);
20                   }
21               }
22           }
23   
24           protected override void OnLoad(EventArgs e)
25           {
26               SetInputControlsHighlight(this, "highlight", false);
27   
28               base.OnLoad(e);
29           }
30   
31   }
32   

An put in you CSS style sheet...

.highlight { background-color: #fefbd2; color: #000080; }

This is a known bug in FireFox that occurs when certain objects overlap on the page due to absolute positioning.  The modal popup uses absolute positioning, which is what is causing this.  There is no fix that you can affect in your code.

Thanks Hollow,

Your example worked Very Good in swaping the background color to provide a visual indicator that a ModalPopup Textbox control has focus in Firefox.

The cursor continues to not blink in FireFox. This however is now a smaller issue since there is at least nome some visual indication of focus-select with your fix.

I would like to keep this case open since some others may have ideas on how to get the cursor to blink.

Thanks -

Hi,

I had a similar problem and have fixed it by using style="position: fixed" on the textbox.

Pete

I am having a similar issue as well.  It appears to be related to the div that creates the modal background effect.  Position:fixed also works for me, but if I scroll the page then the layout is messed up.

I fixed by issue by creating wiring up the Ajax EndRequestHandler and adding some code to hide the background div for FireFox only.

jeromevernon@sbcglobal.net:

provide a visual indicator that a ModalPopup Textbox control has focus in Firefox.

To provide that you can try to add attribute "onblur" with empty javascript action (or whatever) in your TextBox control. And set focus on your TextBox in code behind. I don't know why but it works.

It should be in *.aspx:  

     <asp:TextBox onblur=""  ID="yourTextBox" runat="server" ></asp:TextBox>

and in code behind that call popup:

             popupPanel.Show();
            this.scriptManager.SetFocus(yourTextBox);
            yourTextBox.Focus();

In addition, I can tell that the "yourTextBox" won't get the focus in some cases, but it's another issue...

I achieved this by doing following things

1. Remove Drag behavior from modalpopup i.e. remove PopupDragHandleControlID  attribute from modalpopup markup
2. modalpopupextender creates a div element with id as <behaviourid>+"_backgroundElement" (for example if your behaviour id is "loginpopup" then div elements id will be "loginpopup_backgroundElement" (if you don't use behaviour id and you are using only id then id will be <modal popup client id>+"_backgroundElement" )
3. Now just before displaying the popup set above div elements position to  'absolute'

My javascript looks some thing like this

function ShowSignUp(viewindex)
{
    var bEle = document.getElementById('loginpopup_backgroundElement');
    if(bEle) bEle.style.position = 'absolute';
    $find('loginpopup').show();
}

when ever i want to show modal popup i call function ShowSignUp();