Panel, if lengthened, causes touch event to focus on wrong control #5535

Closed
ivan-yu opened this Issue Jan 26, 2013 · 11 comments

Comments

Projects
None yet
3 participants

ivan-yu commented Jan 26, 2013

Hi,

I have a typical user registration form (username, password, confirm password, email, confirm email) put inside a panel, when the panel initially opens, all works perfectly fine, touching each text box will focus the corresponding text box correctly.

However, once added validation (http://docs.jquery.com/Plugins/Validation) to the form, and if any text box is invalid, the form's length becomes longer inside the panel with a new label created right underneath the invalid content text box), at this point, touch event will focus the wrong text box. E.g. Touching the lowest text box, will actually put the focus in the next one up on the form, etc.

Another issue is, when scrolling this now lengthened form to the very bottom, and clicking on the bottom-most part of the page, not the panel, the panel won't be closed anymore.

It is as if the lengthened form is still thinking it is of the old height, and hence touch coordinates get mapped to incorrect control, and also touching the main page at the very bottom (the lengthed bit) won't trigger panel close anymore.

Thank you very much for your attention. I hope this description makes sense to you.

ivan-yu commented Jan 26, 2013

Some more info, I am having this issue in webkit (phonegap wrapped), I noticed some dead space at the bottom of the panel, after the panel gets lengthened, and after the soft keyboard gets hidden, on Android.

@ghost ghost assigned jaspermdegroot Jan 26, 2013

Member

jaspermdegroot commented Jan 26, 2013

@ivan-yu

Thanks for reporting the issue. Please provide a simple test page that reproduces the issues you mention. See contributing guidelines.

Have to see a test page to get a good picture of the issue, but maybe we can fix this by binding positionPanel() to the updatelayout event.

ivan-yu commented Jan 26, 2013

Thanks for the reply. Please refer to http://game.nekomobi.com/panel/

If you click the top right grid like icon, then click signup, it will bring you to the signup screen, don't type anything, just click submit. All text boxes will be invalidated, a new label will be created under each text box. At this stage, the panel has increased in height, and if you scroll all the way down this lengthened panel, and touch on say the last text box on a mobile browser (I tried Chrome), focus will sometimes go to the second last text box. You'll also notice a dead area near the bottom, always on the page side, sometimes also on the panel side. If you click this dead area on the page side, it won't be able to close the panel when clicked.

Owner

arschmitz commented Jan 26, 2013

@ivan-yu Please refer to the contributing guidelines https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md as @ugomobi said in there you will see we need a simplified JSbin test page there is a template in the contributing guidelines We need a jsbin so that we can easily see the exact code and markup you are using and make changes if need. it also insures that the page does not change while or before we get a chance to look.

ivan-yu commented Jan 26, 2013

Apology on that, please refer to http://jsbin.com/onibuc/52/

Member

jaspermdegroot commented Jan 26, 2013

Same test page, but I put links to latest code back in there. Also moved the grid button to the left because the "edit in JS Bin" label is in the way: http://jsbin.com/onibuc/53

ivan-yu commented Jan 26, 2013

So far so good! I'll will rebuild the phonegap wrapper as well to test it out.

Member

jaspermdegroot commented Jan 26, 2013

@ivan-yu

Can you actually reproduce the issue with latest code, because I can't. You said you tested Chrome. On what OS?

Member

jaspermdegroot commented Jan 26, 2013

@ivan-yu

Although I couldn't reproduce it with your test page I do see a possible issue with dynamically adding content to a panel.

I just committed a fix for this. I bound the panel to the "updatelayout" event and made it call the positionPanel function when this event is fired. The positionPanel function will check the height of the panel contents.
See more about the "updatelayout" event here: http://jquerymobile.com/test/docs/api/events.html

So whenever you dynamically add content to a panel that affects its lenght you should trigger this event on the panel. I added it to the errorPlacement function on your test page: http://jsbin.com/onibuc/57/edit

We will also add this information to the API documentation.

ivan-yu commented Jan 27, 2013

Thank you! The issue is resolved with the latest code + triggering updateLayout. It is working now in Android webkit (phonegap). That was where I experienced the issue with the old code. Now it works!

Member

jaspermdegroot commented Jan 27, 2013

@ivan-yu

I am glad it resolved your problem.

Note: On your test page I added the trigger updatelayout code to the errorPlacement function, just as a quick example. That function is called after each input that didn't pass validation. It would be better for performance if you trigger the event only once, after all inputs have been validated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment