[TIMOB-8869] Android: soft keyboard is covering the tableViewRow textField

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Won't Fix
Resolution Date	2012-04-27T12:43:51.000+0000
Affected Version/s	Release 2.1.0
Fix Version/s	n/a
Components	Android
Labels	SupportTeam, api
Reporter	Federico Casali
Assignee	Vishal Duggal
Created	2012-04-24T00:25:49.000+0000
Updated	2017-03-22T18:08:37.000+0000

Description

Problem Description

The soft keyboard might partially or fully cover the textField.

Steps to reproduce and code sample

1. Create a tableView with a number or rows with a textField. Set the windowSoftInputMode property for the window. 2. Click on one of the textField in the lower part of the screen (the part that should then be covered by the soft keyboard) Result: keyboard opens, the tableView it's moved up but the keyboard partially cover the focused textField 3. Click on back button and click again in the textField Result: keyboard open, but the tableView does not scroll up. The keyboard covers also the focused textField. Code sample

var win = Ti.UI.createWindow({
    title:'pippo',
    backgroundColor:'white',
    windowSoftInputMode:Ti.UI.Android.SOFT_INPUT_ADJUST_PAN
});

 
 
var data=[];

function createRows(i) {
		var row = Titanium.UI.createTableViewRow({
			height : 70,
			backgroundColor : 'white'
		});
		

		var inputTextField = Titanium.UI.createTextField({
			color : '#ff7c00',
			top : 10,
			height : 50,
			textAlign : 'right',
			width : '25%',
			hintText : '',
			left : '65%',
			right : '8%',
			softKeyboardOnFocus : (Ti.UI.Android) ? Titanium.UI.Android.SOFT_KEYBOARD_SHOW_ON_FOCUS : '',
			borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
			keyboardType : Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION,
			returnKeyType : Titanium.UI.RETURNKEY_DONE,
			font : {
				fontSize : 20,
				fontColor : '#ff7c00',
				fontWeight : 'bold',
				fontFamily : 'Helvetica Neue'
			}
		});
		inputTextField.addEventListener('return', function() {
			alert('return');
			inputTextField.blur();
		});

		row.add(inputTextField);
		return row;
	}


for( i = 0; i <= 20; i++) {
	var row = createRows(i);
	data.push(row);
};
 
 

var tv = Ti.UI.createTableView({
	bottom:120,
	data:data
});

win.add(tv);

 
 
var view1 = Ti.UI.createView({
    backgroundColor:'blue',
    bottom:0,
    height:100,
});
win.add(view1);
 
win.open();

Additional notes

Bug reported by ING.

Comments

Vishal Duggal 2012-04-26

It is generally not a good idea to put up text fields in TableViews in Android because of the underlying Android behavior of the TableView temporarily stealing focus while scrolling. The same functionality can be achieved by using a scrollView instead.

   var win = Ti.UI.createWindow({
   	title:'pippo',
   	backgroundColor:'white',
   	windowSoftInputMode:Ti.UI.Android.SOFT_INPUT_ADJUST_PAN
   });
    
   var curTop = 0;
   
   
   function createRows(i) {
   	var row = Titanium.UI.createView({
   		width:'100%',
       	height : 70,
       	left:0,
       	top:curTop,
       	backgroundColor : 'white',
       	borderColor:'#bbb',
       	borderWidth:1
   	});
   	var inputTextField = Titanium.UI.createTextField({
   		color : '#ff7c00',
   		top : 10,
   		height : 50,
   		textAlign : 'right',
   		width : '25%',
   		hintText : '',
   		left : '65%',
   		right : '8%',
   		borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
   		keyboardType : Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION,
   		returnKeyType : Titanium.UI.RETURNKEY_DONE,
   		font : {
   			fontSize : 20,
   			fontColor : '#ff7c00',
   			fontWeight : 'bold',
   			fontFamily : 'Helvetica Neue'
   	    }
   	});
   	inputTextField.addEventListener('return', function() {
   		alert('return');
   		inputTextField.blur();
       });
   	
   	row.add(inputTextField);
       return row;
   }
   
   
   var scrollView = Ti.UI.createScrollView({
   	bottom:120,
   	contentWidth:'auto',
   	contentHeight:'auto'
   })
   
   for( i = 0; i <= 20; i++) {
   	var row = createRows(i);
   	scrollView.add(row);
   	curTop += 70;
   };
   win.add(scrollView);
   
   var view1 = Ti.UI.createView({
       backgroundColor:'blue',
       bottom:0,
       height:100,
   });
   win.add(view1);
     
   win.open();

Vishal Duggal 2012-04-26

The underlying issue is with the Android ListView implementation. Nothing we can do at the platform level.
Junaid Younus 2012-04-27

Vishal, if I run this code, the soft keyboard seems to still cover up the textfield. Here is a screenshot: http://h9.abload.de/img/device-2012-04-27-103ycxpy.png Now if I run the same code again, but this time comment out line 4 (windowSoftInputMode:Ti.UI.Android.SOFT_INPUT_ADJUST_PAN), it seems to work fine, it doesn't overlap anything anymore. Is this the expected behavior?
Vishal Duggal 2012-04-27

When you comment out the windowSoftInputMode the window is following the SOFT_INPUT_ADJUST_RESIZE policy (you'll see the blue box come up) as in resizing the views so that the textField is visible. Again this is an underlying OS issue that we can not handle on the platform level.

Paul Dowsett 2012-05-14

Thanks for your help earlier, Federico - it really helped! I'm going to see if we can add the following to the docs, to help people get around this issue.

   var currentTop = 0;
   
   var win = Ti.UI.createWindow({
     backgroundColor:'white'
   });
   
   if (Ti.UI.Android){
     win.windowSoftInputMode = Ti.UI.Android.SOFT_INPUT_ADJUST_PAN;
   }
   
   function createRow(i) {
     var row = Ti.UI.createView({
       backgroundColor: 'white',
       borderColor: '#bbb',
       borderWidth: 1,
       width:'100%', height: 70,
       top: currentTop, left: 0
     });
     var inputTextField = Ti.UI.createTextField({
       hintText: 'Enter value ' + i,
       keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
       top: 10, left: '10%',
       width: '80%', height: 60
     });
     row.add(inputTextField);
     return row;
   }
   
   var scrollView = Ti.UI.createScrollView({
     bottom:120,
     contentHeight: 'auto'
   });
   
   for(var i = 0; i <= 20; i++){
   var row = createRow(i);
     scrollView.add(row);
     currentTop += 70;
   }
   win.add(scrollView);
   
   var label = Ti.UI.createLabel({
     backgroundColor:'darkgray',
     text: 'Your advert here',
     textAlign: 'center',
     bottom:0,
     width: Titanium.UI.FILL, height:100
   });
   win.add(label);
   win.open();

Lee Morris 2017-03-22

Closing ticket as the issue will not fix and with reference to the above comments. A workaround has been provided.

JSON Source