Problem description
Popover does not change it's direction when it is opened and device orientation it's being turned
Steps to reproduce
Run the app and open the popover in Portrait mode.
Change orientation to landscape.
Result: popover direction it's still the one shown in portrait mode
Close the popover and reopen it.
Result: popover direction it's now shown in the correct expected direction.
This is causing another user experience problem:
Open the popover in Portrait mode and focus one of the textFields.
Change orientation in landscape.
Result: Since the keyboard it's opened, the popover is also reduced in dimension and the first fields are no longer visible. The user has to close the popover and reopen it again.
See sample code.
app.js
var Popover = require('popover');
var window = Ti.UI.createWindow();
var popover = new Popover();
var button = Ti.UI.createButton({
title:'Popover',
width:300,
height:50,
top:100
});
button.addEventListener('click', function() {
popover.show({view:button, animated:true});
});
window.add(button);
window.open();
popover.js
function TestPopover() {
var popover = Ti.UI.iPad.createPopover({
width:380,
height:350,
title:'Popover view',
barColor:'#111',
backgroundColor:'white'
});
popover.add(buildContentView());
Ti.Gesture.addEventListener('orientationchange', function(e) {
Ti.API.info("Orientation changed, Update popover arrow direction");
switch (Titanium.Gesture.orientation) {
case Titanium.UI.LANDSCAPE_LEFT:
popover.setArrowDirection(Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT);
break;
case Titanium.UI.LANDSCAPE_RIGHT:
popover.setArrowDirection(Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT);
break;
case Titanium.UI.PORTRAIT:
popover.setArrowDirection(Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_UP);
break;
case Titanium.UI.UPSIDE_PORTRAIT:
popover.setArrowDirection(Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_UP);
break;
}
});
return popover;
}
function buildContentView() {
var contentView = Ti.UI.createView({top:10,left:0,width:"auto", height:"auto", backgroundColor:'white', layout:'vertical'});
contentView.add(labelledInputFieldFor("Name"));
contentView.add(labelledInputFieldFor("Address"));
contentView.add(labelledInputFieldFor("Phone Number"));
contentView.add(labelledInputFieldFor("Mobile Number"));
contentView.add(labelledInputFieldFor("Email Address"));
return contentView;
}
function labelledInputFieldFor(text) {
var view = Ti.UI.createView({top:5, width:380, height:40,left:15, layout:'horizontal'});
view.add(labelWith(text));
view.add(inputFieldFor(text));
return view;
}
function labelWith(text) {
return Ti.UI.createLabel({text:text,font:{fontSize:16,fontWeight:'bold'}, left:10, width:120, height:'auto'});
}
function inputFieldFor(label) {
return Titanium.UI.createTextField({multiline:false, clearButtonMode:Titanium.UI.INPUT_BUTTONMODE_ALWAYS,height:35,
left:10, width:200, font:{fontSize:16}, color:'black', hintText:'Enter ' + label, wordWrap:true,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType:Titanium.UI.RETURNKEY_NEXT});
}
module.exports = TestPopover;
cannot reproduce Tested with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 iOS iPhone Simulator: iOS SDK version: 6.0
Closing ticket as the issue cannot be reproduced.