[TIMOB-26336] Android: Cursor issue when textfield inside view, which is under tableview

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Closed
Resolution	Invalid
Resolution Date	2019-01-11T02:29:52.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	n/a
Reporter	Shuo Liang
Assignee	Gary Mathews
Created	2018-08-24T09:25:27.000+0000
Updated	2019-01-11T02:29:55.000+0000

Description

Reproduce

1.Run the following code in an Alloy project. (Simple structure, textfield is under view, and view is under tableviewRow). 2.Click different Rows (basically card type in the example). 3 There will be a textfield to input. 4.Try #2 and #3 serval times.

Problem

5. You will see, some times, there is no cursor display in textfield. 6. The other problem is, some times, if you click the textfield, which is focused already. The cursor will disappear.

Note

Mainly code about focus and cursor is around line 471 - 478 in index.js file

Attachments

File	Date	Size
Curser Record.mov	2018-09-07T02:28:11.000+0000	6607796
index.js	2018-08-24T09:22:52.000+0000	12996
index.tss	2018-08-24T09:22:40.000+0000	783
index.xml	2018-08-24T09:22:27.000+0000	141
TIMOB-26336-i.mov	2018-09-06T18:01:04.000+0000	9911827

Comments

Shuo Liang 2018-09-06

Any update on this?
Feon Sua Xin Miao 2018-09-06

[~sliang] I don't see the cursor disappearing. Please check out the attached screen recording of what I see, also I changed the text field background color to yellow to make the text field area visible.
Shuo Liang 2018-09-07

[~fmiao] Changed background color like you did. Still can see the problem. Please check the record I made. (Android 6 Emulator)

Gary Mathews 2018-09-07

I highly recommend they use ListView and a template for this: *index.js*

   const cardDetails = [{
   	"carddigits" : "0000",
   	"cardtype" : "VISA",
   	"cardexpiry" : "2018-12-31",
   	"validfrom" : "2018-08-09",
   	"tokenid" : "10293170401"
   }, {
   	"carddigits" : "0012",
   	"cardtype" : "MASTERCARD",
   	"cardexpiry" : "2018-12-31",
   	"validfrom" : "2018-08-09",
   	"tokenid" : "10293172201"
   }, {
   	"carddigits" : "0000",
   	"cardtype" : "VISA",
   	"cardexpiry" : "2018-12-31",
   	"validfrom" : "2018-08-09",
   	"tokenid" : "10293170401"
   }, {
   	"carddigits" : "0000",
   	"cardtype" : "VISA",
   	"cardexpiry" : "2018-12-31",
   	"validfrom" : "2018-08-09",
   	"tokenid" : "10293170401"
   }];
   
   function populateCards () {
   	const section = Ti.UI.createListSection();
   
   	let items = [];
   	for (let details of cardDetails) {
   		items.push({
   			type: { text: details.cardtype },
   			number: { text: details.carddigits },
   			date: { text: details.cardexpiry }
   		});
   	}
   	section.setItems(items);
   
   	$.cardList.setSections([section]);
   }
   
   function onClick (e) {
   	alert(JSON.stringify(e, null, 1));
   }
   
   populateCards(); 
   $.cardWindow.open();

*index.xml*

   <Alloy>
       <Window id="cardWindow">
           <ListView id="cardList" defaultItemTemplate="template">
               <Templates>
                   <ItemTemplate name="template" onClick="onClick">
                       <View layout="vertical" width="Ti.UI.FILL" height="Ti.UI.SIZE">
                           <View layout="horizontal" width="Ti.UI.FILL" height="Ti.UI.SIZE">
                               <ImageView bindId="check" id="checkImage" />
                               <Label bindId="type" id="typeLabel" />
                               <Label bindId="number" id="numberLabel" />
                               <Label bindId="date" id="dateLabel" />
                           </View>
                           <TextField bindId="cvc" id="cvcField" visible="false" />
                       </View>
                   </ItemTemplate>
               </Templates>
           </ListView>
       </Window>
   </Alloy>

*index.tss*

   "#cardWindow":{
   	width: Titanium.UI.FILL,
   	height: Titanium.UI.FILL,
   	backgroundColor: "#09357a"
   }
   "#cardWindow[platform=android]":{
   	theme: "Theme.NoActionBar"
   }
   "#cardWindow[platform=ios]":{
   	statusBarStyle: Titanium.UI.iOS.StatusBar.LIGHT_CONTENT
   }
   ".WindowClass[platform=android]":{
   	windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_ADJUST_PAN
   }
   
   "#cardList": {
   	width: Ti.UI.FILL,
   	height: Ti.UI.FILL
   }
   "#checkImage": {
   	left: 10,
   	width: 30,
   	height: 30,
   	borderRadius: 15,
   	backgroundColor: "white"
   }
   "#typeLabel": {
   	left: 10,
   	width: 100
   }
   "#numberLabel": {
   	left: 10,
   	width: 100
   }
   "#dateLabel": {
   	left: 10,
   	width: 100
   }
   "#cvcField": {
   	right: 10,
   	keyboardType: Ti.UI.KEYBOARD_TYPE_NUMBER_PAD,
   	passwordMask: true,
   	maxLength : 4,
   	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
   	hintText: "CVC"
   }

Shuo Liang 2018-09-19

Informed customer about that listview suggestion week ago, no reply at all. Will push it again.

JSON Source