Dojo Mobile ComboBox dropdown misplaced in iOS8/Safari

357 views Asked by At

When pulling up my Dojo Mobile app on an iPad with iOS 8, the ComboBox dropdown doesn't get placed correctly. My ComboBox is very near the bottom of the screen (in a single-page app with no scrolling), and so the dropdown should almost always appear above the CombBox. It does this fine in all browsers/devices that I've tested except Safari on the iPad. On there, it always appears below the ComboBox and scrolls all the other content off the screen.

To confirm this wasn't a problem with my app, I opened the dojox/mobile ComboBox tests on the iPad, and they behave the same way. In particular, dojox/mobile/tests/test_ComboBox-widepage.html shows it best. I have text-entry disabled on my ComboBox (to keep on-screen device keyboards from appearing), and you can replicate this in the test page by adding this:

ready(function () {
    domAttr.set(registry.byId('dropDown').textbox, 'readOnly', true);               
});

I really don't know where to begin looking for a solution to this. Nothing in ComboBox.js looks wrong, which makes sense since it works almost everywhere. Is there any quick fix that I can put in place, or do I have to report this as a bug and wait for fixes?

Edit: Added screenshots. These are all of dojox/mobile/tests/test_ComboBox-widepage.html. Click to see them full-size.

1

There are 1 answers

3
Adrian Vasiliu On BEST ANSWER

As far as I can see, this seems the same issue as the one covered by https://bugs.dojotoolkit.org/ticket/18317. The fix is already available in the master of the repository, and will be available in 1.10.3. You may want to test the fix (https://github.com/dojo/dojox/commit/86d34bcd9b6b11bf23a1ed080398a8067a4b349c ) on your side.

That said, I do not think that, per se, the fact that page scrolls when opening the dropdown of the ComboBox can be considered a defect, nor the fact that the dropdown shows either on top, or on the bottom of the input element. As an alternate to the solution mentioned above, you may want to see if adding registry.byId('dropDown').set("dropDownPosition", ["above"]); fits better your needs.