[ALOY-1562] iOS: TextArea can't get focus or blur if it is located in two different TableViewSections

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Closed
Resolution	Invalid
Resolution Date	2017-05-09T17:53:49.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK
Labels	n/a
Reporter	Shuo Liang
Assignee	Feon Sua Xin Miao
Created	2017-04-20T12:02:33.000+0000
Updated	2017-05-09T17:53:49.000+0000

Description

Reproduce

1. Run the attached files in a new Alloy project. 2. Click the first row of tableview

Problem

The textArea does not get focus and keyboard does not show up

Note

If there is only one tableViewSection with those two tableViewRows (instead of one row in each section), TextArea will get focused and keyboard will display well.

Attachments

File	Date	Size
AlloyFiles.zip	2017-04-26T10:48:16.000+0000	2992
index.js	2017-04-20T12:02:20.000+0000	261
index.tss	2017-04-20T12:02:21.000+0000	432
index.xml	2017-04-20T12:02:21.000+0000	173
multipleSectionTesting1.zip	2017-05-04T13:32:56.000+0000	7538
tableRow.js	2017-04-20T12:02:20.000+0000	199
tableRow.tss	2017-04-20T12:02:20.000+0000	1818
tableRow.xml	2017-04-20T12:02:21.000+0000	1045

Comments

Vijay Singh 2017-04-25

I tried with following classic app test code -

   var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   var label = Ti.UI.createLabel({
     text: 'test focus'
   });
   var textArea = Ti.UI.createTextArea({
     value:'test test test',
     height:80,
     backgroundColor:'gray',
     width:Ti.UI.FILL
   });
   
   var row1 = Ti.UI.createTableViewRow({
     height: 100
   
   });
   row1.add(label);
   
   var row2 = Ti.UI.createTableViewRow({
     height: 100
   });
   row2.add(textArea);
   
   var section1 = Ti.UI.createTableViewSection({
   
   });
   section1.add(row1);
   //section1.add(row2);
   
   var section2 = Ti.UI.createTableViewSection({
   
   });
   section2.add(row2);
   
   var table = Ti.UI.createTableView({
     data: [section1, section2]
   });
   
   row1.addEventListener('click', function(e) {
   hidekeyboard();
   });
   function hidekeyboard(){
     Ti.API.info("hide keyboard");
     Ti.API.info(textArea.value);
     textArea.focus(); 
   }
   
   win.add(table);
   win.open();

It is working fine . But when I am trying with given alloy code, it is giving wrong behavior as mentioned in ticket. [~htbryant] Can you please help me in reproducing with help of simple test case . It will help me in debugging more efficiently.

Harry Bryant 2017-04-25

[~vijaysingh] Sure, I'll investigate the issue and post my findings here.
Vijay Singh 2017-04-26

[~sliang] The workaround which worked for me is, in xml file TableView tag should be withTableViewSection. So I have attached "AlloyFiles.zip" which have updated index.xml, tableRow.xml, index.js . Please check with customer if this will resolve their problem.

Feon Sua Xin Miao 2017-04-28

[~vijaysingh], could you try replace the loadData function under index.js with these:

   function loadData(){
   	var formrow = [];
   
   	var tbl = Alloy.createController('tableRow');
   	formrow.push(tbl.getView('timeDataSection'));
   	formrow.push(tbl.getView('commentsSection'));
   
   	$.formDetails.setData(formrow);
   }

Feon Sua Xin Miao 2017-05-02

[~sliang], do these work for the customer?

   var tbl = Alloy.createController('tableRow', [arg1, arg2]);
   // or 
   var tbl = Alloy.createController('tableRow', {a: arg1, b: arg2});

Shuo Liang 2017-05-04

[~fmiao] Just get customer's feedback. "Yes it working fine in sample application. But in our case it is not working. Since we are sending dynamic arguments to each section in loop. Example : formrow.push(Alloy.createController('tableRow', {a: arg1, b: arg2}).getView('commentsSection')) Attached the multipleSectionTesting1.zip file which has sample application. I have hard coded the arguments values but in our case it comes from database. Also i have small icon in first labour time row, if i click that new section of labour and travel row will append using insertSectionAfter API . That functionality i didn't mentioned in sample. Basically we are passing arguments dynamically to tableRow file. So we cannot set the arguments like shown below. var tbl = Alloy.createController('tableRow', [arg1, arg2]); If i click the Travel Time row, the comments field is not focusing. The focus and blur API is not working if we have TextArea in separate section. "
Feon Sua Xin Miao 2017-05-04

[~sliang] The issue here is not that the focus or blur API is not working when a view is in different section. Each Alloy.createController('tableRow') call creates an instance of the controller tableRow, and the loadData event triggered by the instance will access the view $.REPAIR_COMMENT within that instance. To access controller object B's view in object A, pass a reference of the view in B to A.

JSON Source