Problem
When popoverView is set to control the position of the Photo Gallery popover, the popover opens too far to the right and down to a point where it eventually opens off-screen, out of view, depending on the position of the view.
Test case
Test 1
The following code adds three sets of three buttons to a window. Each button click should trigger the display of the Photo Gallery in a popover, with the popover pointing to the clicked button. The button label indicates the value that is set for arrowDirection.
Notice that the lower right "Left Arrow" button causes the Photo Gallery popover to open off screen. And the rest appear in unexpected positions and/or pointed to unexpected coordinates.
function showGallery(targetView, arrowDirection) {
Titanium.Media.openPhotoGallery({
success:function(event) {
Titanium.API.info('photo gallery success');
},
cancel:function() {
Titanium.API.info('photo gallery cancel');
},
error:function(error) {
Titanium.API.info('photo gallery error');
},
allowEditing: true,
popoverView: targetView,
arrowDirection: arrowDirection,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
});
};
var win = Ti.UI.createWindow({
title:'Test Case',
backgroundColor:'#ffffff'
});
var b1 = Ti.UI.createButton({
top: 20,
left: 20,
height: 30,
width: 150,
title: 'Left Arrow'
});
b1.addEventListener('click', function(e) {
showGallery(b1, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT);
});
win.add(b1);
var b2 = Ti.UI.createButton({
top: b1.top + 40,
left: b1.left,
height: 30,
width: 150,
title: 'Any Arrow'
});
b2.addEventListener('click', function(e) {
showGallery(b2, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_ANY);
});
win.add(b2);
var b3 = Ti.UI.createButton({
top: b2.top + 40,
left: b2.left,
height: 30,
width: 150,
title: 'Right Arrow'
});
b3.addEventListener('click', function(e) {
showGallery(b3, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT);
});
win.add(b3);
var b4 = Ti.UI.createButton({
top: 250,
left: 250,
height: 30,
width: 150,
title: 'Left Arrow'
});
b4.addEventListener('click', function(e) {
showGallery(b4, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT);
});
win.add(b4);
var b5 = Ti.UI.createButton({
top: b4.top + 40,
left: b4.left,
height: 30,
width: 150,
title: 'Any Arrow'
});
b5.addEventListener('click', function(e) {
showGallery(b5, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_ANY);
});
win.add(b5);
var b6 = Ti.UI.createButton({
top: b5.top + 40,
left: b5.left,
height: 30,
width: 150,
title: 'Right Arrow'
});
b6.addEventListener('click', function(e) {
showGallery(b6, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT);
});
win.add(b6);
var b7 = Ti.UI.createButton({
top: 500,
left: 500,
height: 30,
width: 150,
title: 'Left Arrow'
});
b7.addEventListener('click', function(e) {
showGallery(b7, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT);
});
win.add(b7);
var b8 = Ti.UI.createButton({
top: b7.top + 40,
left: b7.left,
height: 30,
width: 150,
title: 'Any Arrow'
});
b8.addEventListener('click', function(e) {
showGallery(b8, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_ANY);
});
win.add(b8);
var b9 = Ti.UI.createButton({
top: b8.top + 40,
left: b8.left,
height: 30,
width: 150,
title: 'Right Arrow'
});
b9.addEventListener('click', function(e) {
showGallery(b9, Ti.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT);
});
win.add(b9);
win.open()
Test 2
You can also recreate the behavior by running the Kitchen Sink (not Kitchen Sink iPad) project in the iOS iPad Simulator in portrait orientation.
On the Phone tab, tap the Photo Gallery row in the table view. The Photo Gallery will appear in the correct position in the resulting view. In the script, [photo_gallery.js](
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/photo_gallery.js), change lines 6 and 7 from...
top:20,
left:10,
to...
top:200,
left:100,
You will see that the popover appears too far down and to the right of the image view.
Now change the lines to:
top:400,
left:400,
...and the popover will open off-screen. You can tell that it is open by trying to tap the "Phone" (back) button. Your first tap will be ignored, because it serves to close the popover. The second tap will return you to the table view.
If you change the arrowDirection in line 20 as follows:
arrowDirection = Ti.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT; // From POPOVER_ARROW_DIRECTION_LEFT
...the popover will be visible again, but still not open where I'd expect.
Thanks for raising this ticket. In order for me to escalate it to the core team, all the fields must be complete. Please check it against the [JIRA Ticket Checklist](https://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report#HowtoSubmitaBugReport-JIRATicketChecklist), and add any missing information in the correct fields. Furthermore, a test case is required, as per the [Creating a Test Case](https://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report#HowtoSubmitaBugReport-CreatingaTestCase) section. I will mark this resolved for now. Please reopen it once it is complete, and I will move it to the main project. Cheers
It looks like you reformatted my submission to better conform with the Ticket Checklist. Is that complete, or do you expect more changes from me? I thought I'd provided a simple test case by identifying a two-line change in the Kitchen Sink that will allow you to reproduce the issue. Would you instead like me to create a new project to demonstrate the unexpected behavior and satisfy your test case request?
Hi Brad A ticket must be self-contained, I'm afraid. Would you add a code block containing the smallest possible test case, that runs without modification when pasted into a blank app.js file? Again, see [Creating a Test Case](https://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report#HowtoSubmitaBugReport-CreatingaTestCase). Also, please complete the environment field. Once this is done, I will be able to escalate it. Thanks for your help and patience! ;)
I've attached a simple app.js file that adds three sets of three buttons to a window. Each button click should trigger the display of the Photo Gallery in a popover, with the popover pointing to the clicked button. The button label indicates the value that is set for arrowDirection. Notice that the lower right "Left Arrow" button causes the Photo Gallery popover to open off screen. And the rest appear in unexpected positions and/or pointed to unexpected coordinates.
My app was rejected from App Store because of this bug. Reasons for Rejection: "Specifically, we noticed your app contained popover elements that didn't point to the element that revealed them. To avoid user confusion, a popover element's arrow should point to the element that revealed it. " Please fix this as soon as possible. Thank you.
Teated on: Titanium SDK: 2.2.0.v20120716092112 Titanium Studio, build: 2.1.1.201207121732 Device: iPad 5.1. Initial location of every pop-up is un accurate. When click on a lower Right Arrow button in portrait mode pop-up goes off screen.
Tested with latest master and everything works as suppose to.
Verified fixed with SDK 2.2.0.v20120716092112 and iPad 5.1