[Solved] GXT - Focus on a TextField in a FormPanel within a Window in IE

[jyothsna]

We have a window with a form panel containing a single password field which is required. When the window is launched, the focus should be on the text field. To achieve this we have used field.focus() method. However in IE 7 or 8, the cursor is not seen within text field. Also a validation error is displayed next to the field.

This issue is seen only in IE 7 or 8. It works fine in Mozilla.

If the form panel is added to a normal content panel / Root panel, this issue is not seen.

Sample code:

    
public void onModuleLoad() 
    {            
        Button button = new Button("Distribute");        
        
        button.addSelectionListener(new SelectionListener<ButtonEvent>()
        {            
            @Override
            public void componentSelected(ButtonEvent ce)
            {
                Window window = new Window();
                window.setWidth(400);
                FormPanel formPanel = new FormPanel();                 
                
                TextField<String> passwordField = new TextField<String>();                
                passwordField.setFieldLabel("xyz");
                passwordField.setEmptyText("abcd");
                passwordField.setAllowBlank(false);    
                passwordField.setMaxLength(255);
                passwordField.setPassword(true);
                passwordField.focus();
                
                formPanel.add(passwordField);
                window.add(formPanel);
                window.show();        
            }
        });

        FormPanel formPanel = new FormPanel();                 
        
        TextField<String> passwordField = new TextField<String>();                
        passwordField.setFieldLabel("xyz");
        passwordField.setEmptyText("abcd");
        passwordField.setAllowBlank(false);    
        passwordField.setMaxLength(255);
        passwordField.setPassword(true);
        passwordField.focus();
        
        formPanel.add(passwordField);
        
        RootPanel.get().add(button);
        RootPanel.get().add(formPanel);
        
    }

We have tried using field.clearInvalid() method after it has been rendered to remove the validation error. However that doesnt help.

Is there any work around to this issue ? When the window is launched we dont want the field to show a validation error and cursor to be visible within the field.

We are using GWT version: 2.0.3 and GXT version 2.1.0

The fix proposed below works only in the hosted mode. It does not work when the application is deployed on a remote server.

[sven]

If you solve something, please post your solution here so that others have it too. You probably want to use setFOcusWidget on your Window

[jyothsna]

Hi Sven, Using setFocusWidget worked.

                Window window = new Window();
                window.setWidth(400);
                FormPanel formPanel = new FormPanel();                 
                
                TextField<String> passwordField = new TextField<String>();                
                passwordField.setFieldLabel("xyz");
                passwordField.setEmptyText("abcd");
                passwordField.setAllowBlank(false);    
                passwordField.setMaxLength(255);
                passwordField.setPassword(true);
                // passwordField.focus(); - Comment this
                
                formPanel.add(passwordField);
                window.add(formPanel);

                window.setFocusWidget(passwordField); // Added this line
                window.show();

Sorry, I edited the post as [Solved] but did not update the post with the solution.

Thanks a lot for your help !

[jyothsna]

Hey sven,

The solution I have mention in this thread works only in the hosted mode. When the application is deployed on a remote server, IE 7 still shows a validation error on the field when the window is rendered. Any idea why this could be happening ?

[jyothsna]

Solved !!. Issue was "passwordField.focus()" was not removed.

[r7777]

Hi,

I am unable to get rid of the validation error when the window opens up. I have tried using setFocusWidget and it does put focus on the component, but still the validation error is there.

Window newUserWindow = new Window();
FormPanel form = new FormPanel();
TextField<String> domain = new TextField<String>();
domain.setFieldLabel("Domain Login asasa");
domain.setName("domainLogin");
domain.setAllowBlank(false);
form.add(domain);
newUserWindow.add(form);
newUserWindow.setFocusWidget(domain );
newUserWindow.show();

Whenever the window opens, the text field is highlighted in red. Can someone help me figure out how to fix this. Thanks in advance.

[jyothsna]

Which browser and which version of GXT are you using ?

[r7777]

The gxt version is 2.2.4. (gxt-2.2.4-gwt22.jar)
I have tried on IE7 and FireFox 5

Thanks

[preetesh]

Thanks JYOTHSNA for sharing this !!!

Keep it up.

I used GXT and Browser versions as follows:

GXT Version: gxt-2.2.5-gwt22.jar
Browser Version: Internet Explorer 8.0

@ r7777: Remove "domain.setAllowBlank(false);" from your code which is causing red line around the Text-box.

Thanks !!!