Export to GitHub

google-web-toolkit - issue #5968

Page unusable after closing a tab within TabPanel/TabLayoutPanel in IE8


Posted on Feb 2, 2011 by Happy Bird

Found in GWT Release (e.g. 1.5.3, 1.6 RC):

2.0.3, 2.0.4, 2.1.0

Encountered on OS / Browser (e.g. WinXP, IE6-7, FF3):

Windows XP SP3, IE8

Detailed description (please be as specific as possible): No text field can take the focus after the following steps: 1.Activate a tab (TabPanel/TabLayoutPanel) with an image in the title 2.Set the focus into a text field within this tab 3.Remove this tab 4.Text fields in the other tabs and whole page can not take the focus by mouse clicking anymore and no text on the page can be selected. But you can go into the text field by tab key. Afterwards are all text fields clickable again.

Shortest code snippet which demonstrates issue (please indicate where actual result differs from expected result):

public void onModuleLoad() {
    final TabPanel tabPanel = new TabPanel();
    // final TabLayoutPanel tabPanel = new TabLayoutPanel(64, Unit.PX);
    tabPanel.setWidth("300px");
    tabPanel.setHeight("300px");

    final Frame frame1 = new Frame("form.html");
    final Frame frame2 = new Frame("form.html");
    final Frame frame3 = new Frame("form.html");
    tabPanel.add(frame1, "Tab1");
    tabPanel.add(frame2, new Image("HTML5_Logo_64.png"));
    // !!! the following two rows lead to the same error
    // tabPanel.add(frame2, new HTML("<img src='HTML5_Logo_64.png'>"));
    // tabPanel.add(frame2, new Button("<img src='HTML5_Logo_64.png'>"));

    // !!! but it works with
    // SimplePanel title2 = new SimplePanel();
    // title2.setStyleName("withImage");
    // tabPanel.add(frame2, title2);

    tabPanel.add(frame3, "Tab3");
    tabPanel.selectTab(0);

    Button b1 = new Button("Remove tab without image");
    b1.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            tabPanel.selectTab(0);
            tabPanel.remove(frame3);
        }
    });
    Button b2 = new Button("Remove tab with image");
    b2.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            tabPanel.selectTab(0);
            tabPanel.remove(frame2);
        }
    });

    RootPanel.get().add(tabPanel);
    RootPanel.get().add(b1);
    RootPanel.get().add(b2);

}

Workaround if you have one:

Replace images by css background image.

Links to relevant GWT Developer Forum posts: http://groups.google.com/group/google-web-toolkit/browse_thread/thread/5ce7bd6b38eda1a9/87ba85cffe72e4b6

http://stackoverflow.com/questions/4793372/no-textbox-can-take-the-focus-by-mouse-clicking-in-ie8

The attachment includes a simple GWT-Project to reproduce this issue. (Or github here: https://github.com/nivoc/GWT-IE-Focus-Bug)

Attachments

Comment #1

Posted on Dec 17, 2012 by Quick Wombat

Any solution to this since it was posted almost two years ago? I am running into the exact same issue.

Comment #2

Posted on Jun 5, 2013 by Massive Cat

(No comment was entered for this change.)

Status: AssumedStale