Problem
In a very particular case, the text in a text area can get visually cropped until you scroll its container. This bug is... odd. But more pervasive than would seem logical.
Here are all the components necessary for the bug to manifest. Remove any of them, and the bug goes away:
- Start with a window that has a scrollable view
- Add two table views to the scrollable view as its first and second pages
- Each table view has inside of it a row with a text area
- When the window is focused, use setData to create the rows for the offscreen (second) page.
- Certain lengths of text must be used; something that is a few words past one line works well
How To Reproduce
Drop the following in an app.js. Run it on an iPad in landscape orientation. Swipe to the right, and look at the text area "Wasdasda....". Notice that only one line of text appears. Now scroll the table view, and a second line of text will appear. This isn't programmatic -- it's magic.
function nodeArea(args) {
var row = Ti.UI.createTableViewRow({ height: 135 });
row.add(Ti.UI.createTextArea({
font: { fontFamily: 'Helvetica Neue', fontSize: 18, fontWeigth: 'bold' },
value: args.area.value, left: 222, right: 8,
borderWidth: 1, borderColor: '#bbb', borderRadius: 8, borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
}));
return row;
}
var rootWindow = Ti.UI.createWindow();
var view2 = Ti.UI.createTableView({
separatorStyle: 1, style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
rootWindow.add(Ti.UI.createScrollableView({
views: [
Ti.UI.createTableView({
separatorStyle: 1, style: Ti.UI.iPhone.TableViewStyle.GROUPED,
data: [
nodeArea({
area: { value: '1. Swipe Right, 2. Look at text area, and 3. scroll the table view.' }
})
]
}),
view2
],
showPagingControl: true,
pagingControlHeight: 40
}));
rootWindow.addEventListener('focus', function() {
view2.setData([
nodeArea({
area: { value: 'Wasdasdascasdawdweteter er ter ter ter ter tre ter ter ter ter ter er ger ger er er ger gerer ger g' }
})
]);
});
rootWindow.open();
Added a couple screenshots to demonstrate what I am seeing on device.
This one is perplexing, as I still haven't figured out the right incantation on this one. For those of you playing along, the Ti text field is the right size. The native UI text field is the right size. Apple's PrivateAPI webview that renders the text, however, is only 62 pixels high, cropping the text in the manner described. Telling the native UI textfield to sizeToFit, change frame, move, layoutSubviews, setNeedsRedraw, all of these do not trigger the refresh that scrolling does.
Still no luck on the right incantation to get around Apple's bug, no matter what tricks I tried on the native side. HOWEVER, there is a workaround.
function nodeArea(args) { var row = Ti.UI.createTableViewRow({ height: 135 }); var textArea = Ti.UI.createTextArea({ font: { fontFamily: 'Helvetica Neue', fontSize: 18, fontWeigth: 'bold' }, value: args.area.value, left: 222, right: 8, borderWidth: 1, borderColor: '#bbb', borderRadius: 8, borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED }); textArea.value = args.area.value + '\n'; row.add(textArea); setTimeout(function(){textArea.value = args.area.value;},10); return row; }We need to keep this ticket open until there is a clear reproduction case outside Titanium, so that we can file the appropriate bug in Radar. openradar does not list any obvious duplicate.
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
Issue does not reproduces Tested with iOS SDK: 5.1 iOS iPad Simulator: 5.1 Mac OS X Version 10.7.5 Titanium SDK version 3.1.1.v20130606121419 Titanium Studio, build: 3.0.1.201212181159
Closing ticket as the issue cannot be reproduced.