iPad Keyboard issues with TextItem

[edgear]

Using SmartGWT 2.4 and GWT 2.04 on iPad (iOS 4.2.1)

When I click on a TextItem the pop-up keyboard will pop-up then immediately pop-down.

This issue can be reproduced by going to the smartgwt showcase , go to the forms ,forms layout, titles demo. Tap on any TextItem.

Thank you.

[edgear]

No one else is having this issue?

[edgear]

I can also duplicate this on iOS 3.2.2 on a separate iPad. My example code is the SmartGWT show case Forms -> Forms Layouts -> Titles example. Click on the the password field and the keyboard will pop-up and then pop-down before a user can input data.

[mljolje]

I have same issue on my iPad. Do not know what is the problem.

Br//Marije

[Isomorphic]

What's happening is that, due to the keyboard appearing, the form is given a new size, so it redraws, causing focus to move temporarily, hiding the keyboard.

To avoid this, make the form fixed size. We're looking a more general workaround.

[edgear]

I have made the form a fixed width,height and the VLayout a fixed width and height. I still get the issue. If the issue is a redraw/focus issue wouldn't every component in the parent/child chain have to be a fixed size?

        hMiddle.setPadding(0);
        hMiddle.setHeight("400px");
        hMiddle.setWidth100();
        hMiddle.setAlign(Alignment.CENTER);
        hMiddle.setDefaultLayoutAlign(Alignment.CENTER);
        hMiddle.setBackgroundColor("#FFFFFF");

        VLayout vLogin = new VLayout();
        vLogin.setDefaultLayoutAlign(Alignment.CENTER);
        vLogin.setHeight(100);
        vLogin.setWidth(300);
        vLogin.setSnapTo("T");
        vLogin.setSnapOffsetTop(30);
        vLogin.setBackgroundColor("white");

        DynamicForm df = new DynamicForm();
        df.setHeight(99);
        df.setWidth(299);
        //df.setAutoFocus(true);

        // Add some standard form options
        final TextItem userTF = new TextItem();
        userTF.setName("userName");
        userTF.setTitle("User Name");
        userTF.setKeyPressFilter(PamsTypes.allMixType);
        final PasswordItem passTF = new PasswordItem();
        passTF.addKeyPressHandler(new KeyPressHandler(){
            public void onKeyPress(KeyPressEvent event)
            {
                if(event.getCharacterValue() == 13)
                {
                }
            }
        });
        passTF.setName("password");
        passTF.setTitle("Password");
        passTF.setKeyPressFilter(PamsTypes.allMixType);
        
        SectionItem section1 = new SectionItem();
        section1.setDefaultValue("Staff Login");
        section1.setSectionExpanded(true);
        section1.setItemIds("userName", "password");
        section1.setCanCollapse(false);
        section1.setShowTitle(false);

        df.setItems(new FormItem[]{section1, userTF, passTF});
        IButton loginB = new IButton("Login");
        loginB.addClickHandler(new ClickHandler() {

            public void onClick(ClickEvent event) {

            }
        });

        vLogin.addMember(df);
        vLogin.addMember(loginB);

        hMiddle.addChild(checkImg);
        hMiddle.addMember(vLogin);

        //bottom section
        hBottom.setHeight100();
        hBottom.setWidth100();
        hBottom.setBackgroundColor("#76B8B8");
        HTMLFlow copyR = new HTMLFlow();
        copyR.setWidth100();
        String copyT = "<center>Copyright &copy 1981 - 2010&nbsp<b style='color:blue;font-size=10px;font-family:Arial,serif'>ED</b><b style='color:red;font-size=10px;font-family:Arial,serif'>gear</b>,LLC.</center><br><center><b style='color:white;font-size=10px;font-family:Arial,serif'><i>"+_VERSION+"</i></b></center>";
        copyR.setContents(copyT);

        hBottom.addChild(copyR);

        vl.addMember(hTop);
        vl.addMember(hMiddle);
        vl.addMember(hBottom);

[Isomorphic]

Hi
In answer to your question - in most cases we are able to resize components by simply updating the specified size of their handles in the DOM, meaning that when a widget is resized it doesn't necessarily have to redraw.
Because of this, typically a resize of an ancestor of a DynamicForm will simply update that ancestors DOM element sizing, it won't need to redraw the actual rendered HTML (which is what led to the blur / refocus behavior and the lost keyboard). DynamicForms are special in that we actually have to redraw on resize - but a parent's size changing shouldn't resize the form if it has a fixed specified size.

Having said this there are other things that could potentially lead to a redraw and would cause the same problem.

The code you attached is incomplete - we tweaked it slightly to make it run and embedded it in a simple entry point class without seeing the problem.
If this is blocking you, can you put together a standalone test case demonstrating the issue (with the fixed size form) and we'll take a look.

[cak]

Has there been or planned to be any changes to supporting the iPad with SelectItem or Calendar controls on a form inside dynamically sized layouts?

Specific instances that appear to not function appropriately are the Pattern Reuse, Office Supply Catalog, and a few other pages on the Featured Samples page as well as the Developer Console itself. On these pages, the SelectItem controls briefly show their contents and immediately disappear. Calendars exhibit similar behavior. Other controls which require the keyboard to pop up typically get resized off the screen or the keyboard may immediately pop back down.

The iPad used to view the site is on iOS 4.2.1. The same behavior was seen using the latest nightly on our own test systems.

[Isomorphic]

There's no problem with dynamically sized layouts in general. You just need to make sure your forms are not sized in a way that depends on the page size.

[har28]

Wondering whether there has been any general fix with this? Thanks