Titanium JIRA Archive
Alloy (ALOY)

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

GitHub Issuen/a
TypeBug
PriorityNone
StatusClosed
ResolutionInvalid
Resolution Date2017-05-09T17:53:49.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK
Labelsn/a
ReporterShuo Liang
AssigneeFeon Sua Xin Miao
Created2017-04-20T12:02:33.000+0000
Updated2017-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

FileDateSize
AlloyFiles.zip2017-04-26T10:48:16.000+00002992
index.js2017-04-20T12:02:20.000+0000261
index.tss2017-04-20T12:02:21.000+0000432
index.xml2017-04-20T12:02:21.000+0000173
multipleSectionTesting1.zip2017-05-04T13:32:56.000+00007538
tableRow.js2017-04-20T12:02:20.000+0000199
tableRow.tss2017-04-20T12:02:20.000+00001818
tableRow.xml2017-04-20T12:02:21.000+00001045

Comments

  1. 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.
  2. Harry Bryant 2017-04-25

    [~vijaysingh] Sure, I'll investigate the issue and post my findings here.
  3. 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.
  4. 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);
       }
       
  5. 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});
       
  6. 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. "
  7. 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