keyboard - Hide the keyboard (blur) when clicking out of a textField inside a tableView in Titanium

Question

I'm trying to get a table in Titanium where each row has a static text and a textField where I can input something.

So I go and create a row where it's left part is the static text and the right part it's my input text field. Just a small problem, I can't hide the keyboard by clicking outside of it.

If it was a normal textField outside a table I would just use the blur method, but in this case I can't get that to work.

This is my code so far: Any idea on how this works and if the solution is valid for both iOS and Android?

var winAddObjectView = Titanium.UI.currentWindow;

var tableAddObjectData = [
    {title:'name', hintText:'item name (optional)'},
    {title:'track no.', hintText:'object tracking code'}
];

var tableAddObjectRowData = [];
for (var i = 0; i < tableAddObjectData.length; i++) {
    var title = Ti.UI.createLabel({
        text:tableAddObjectData[i].title,
        textAlign:"right",
        left:"20",
        height:'auto',
        width:'68',
        color:'#526691',
        font:{fontSize:12, fontWeight:'bold'},
    });
    var textField = Ti.UI.createTextField({
        hintText:tableAddObjectData[i].hintText,
        textAlign:"left",
        left:"96",
        height:'auto',
        width:'184',
        color:'#4C4C4C',
        font:{fontSize:12, fontWeight:'bold'},
    });

    winAddObjectView.addEventListener("click", function(e){
        textField.blur();
    });

    var row = Ti.UI.createTableViewRow({
        height:"45",
    });

    row.add(title);
    row.add(textField);
    tableAddObjectRowData.push(row);
}

var tableAddObjectView = Ti.UI.createTableView({
    headerTitle:'Enter Tracking Information',
    style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
    backgroundColor:'transparent',
    data:tableAddObjectRowData,
});

winAddObjectView.add(tableAddObjectView)

Answer 1

I have made a few changes in your code. Please try this

var tableAddObjectRowData = [];
var textFields = [];              //Created an array of textFields
for (var i = 0; i < tableAddObjectData.length; i++) {
    var title = Ti.UI.createLabel({
        text:tableAddObjectData[i].title,
        textAlign:"right",
        left:"20",
        height:'auto',
        width:'68',
        color:'#526691',
        font:{fontSize:12, fontWeight:'bold'},
    });
    textFields[i] = Ti.UI.createTextField({            //Creating the textField
        hintText:tableAddObjectData[i].hintText,
        textAlign:"left",
        left:"96",
        height:'auto',
        width:'184',
        color:'#4C4C4C',
        font:{fontSize:12, fontWeight:'bold'},
    });

    var row = Ti.UI.createTableViewRow({
        height:"45",
    });

    row.add(title);
    row.add(textFields[i]);
    tableAddObjectRowData.push(row);
}

var tableAddObjectView = Ti.UI.createTableView({
    headerTitle:'Enter Tracking Information',
    style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
    backgroundColor:'transparent',
    data:tableAddObjectRowData,
    height : (tableAddObjectRowData.length * 45) + 60     //Added the height property for the tableView
});

winAddObjectView.addEventListener("click", hideSoftKeyboard);  //added event listener to the window, moved this to out of the loop

function hideSoftKeyboard(){                  //Added function to hide the keyboard
    for(var i=0; i<textFields.length; i++){
        textFields[i].blur();             //Hiding each keyboards
    }
}
winAddObjectView.add(tableAddObjectView);

Explanation

1. winAddObjectView.addEventListener("click", function(e){ textField.blur(); }); The above code segment in your program didn't worked because the click event for the window was not firing due to the height of tableView, the window was hidden and your clicks were firing on the tableView. You can see the difference if you set the backgroundColor property for your tableView. So I adjusted the height of the tableView and hence the click fired in the window and the keyboard has gone.

2. Creation of textField array : You can do the same without creating the textField array and inside the for loop you can create the textField as var textField = Ti.UI.createTextField();. But if you do so, you cannot hide keayboard all the times, since event will be fired for the last textField only. Hence I created the textField array

3. For Android you can also use Ti.UI.android.hideSoftKeybaord() method. For that just change the hideSoftkeyboard() method in our code as follows

   function hideSoftKeyboard(){                  //Added function to hide the keyboard
       if(Ti.Platform.osname === 'android'){
            Ti.UI.Android.hideSoftKeyboard();
       } else {
            for(var i=0; i<textFields.length; i++){
                 textFields[i].blur();             //Hiding each keayboards
            }
       }
   }