PDA

View Full Version : unable to blur text area when focus given to selectfield



eyepoker
11 Oct 2011, 12:19 PM
sencha/phonegap, android (not tested in ios)...

i can't seem to be able to put the keyboard away - if someone enters text into a text area their next required step is to select an item from the list. however, the keyboard is covering the scroller and i can't seem to be able to blur the text area so as to put the keyboard away.... any ideas?



function removeMsgFocus(){
console.log('blur')
Ext.getCmp('FORM_msgText').blur();
}



var createTipForm = new Ext.form.FormPanel({
id:'createTipForm',
items:[{xtype:'fieldset',title:'Add New Item',
items: [
{
xtype:'textareafield',
name:'message',
id:'FORM_msgText',
label:'Message:',
required:true,
maxRows:'8',
maxLength:MAX_LENGTH
},
{
xtype:'selectfield',
name:'arthritis',
label:'Arthritis Type',
required:true,
layout:{type:'vbox',align:'right'},
options: returnOptions(true),
listeners:{focus:removeMsgFocus}
},
{
xtype:'hiddenfield',
name:'session_key',
value:''
},
{
xtype:'button',
text:'Submit',
ui:'action',
scope:this,
handler: function(o,e){
if (NETWORK_STATUS){
submitForm(o,e);
} else {
noNetwork();
}
}
},
{
xtype:'button',
text:'Cancel',
ui:'action',
scope:this,
handler: function(o,e){
if (GLOB_NETWORK_STATUS){
mainWrapper.setActiveItem(0);
} else {
noNetwork();
}
}
}
] // close items list
}]
});

eyepoker
13 Oct 2011, 9:08 AM
appears to me that a lot of the events for selectfields just don't work.

here's another attempt below - and again, the issue is that if i enter text into the textarea and then tap the selectfield the keyboard will not go away - it will obscure the picker which appears beneath it and the textarea retains focus (the cursor remains in the textarea).

something about the select prevents other events from firing... so i can't blur the textarea.

Sencha 1.1.1, Phonegap, android 2.x and 3.1




function removeMsgFocus(){
setTimeout(qweqwe,1000); // shooting in the dark here..... func never gets called
}

function qweqwe(){
console.log('blur')
//Ext.getCmp('FORM_msgText').fieldEl.dom.blur(); // more guesses...
//Ext.getCmp('FORM_msgText').blur();

document.getElementById('takeFocus').focus(); // final attempt at putting the keyboard away


}

var createTipForm = new Ext.form.FormPanel({
id:'createTipForm',
items:[{xtype:'fieldset',//title:'Add New Tip',
items: [
{
xtype:'textareafield',
name:'message',
id:'FORM_msgText',
label:'Your Tip',
required:true,
maxRows:'8',
maxLength:GLOB_max_length,
listeners:{blur:removeMsgFocus}
},
{
xtype:'selectfield',
name:'arthritis',
label:'Arthritis Type',
required:true,
layout:{type:'vbox',align:'right'},
options: returnArthritisTypes(true),
listeners:{
//activate:removeMsgFocus // doesn't work
}
},
{
xtype:'hiddenfield',
name:'session_key',
value:''
},
{
xtype:'button',
text:'Submit',
ui:'action',
scope:this,
handler: function(o,e){
if (GLOB_NETWORK_STATUS){
submitCreateTipForm(o,e);
} else {
noNetwork();
}
}
},
{
xtype:'button',
text:'Cancel',
ui:'action',
scope:this,
handler: function(o,e){
if (GLOB_NETWORK_STATUS){
mainWrapper.setActiveItem(0);
} else {
noNetwork();
}
}
}
] // close items list
}]
});



and in my html:



<form><input type="text" id="takeFocus" onfocus="this.blur();"></form>

eyepoker
14 Oct 2011, 10:48 AM
Well... so I've decided to listen to a tap event on the select field's container which gets me partially to where i want to be. If i were savvy enough I'm sure there's some way to extend the select class, or its picker with an onfocus or activate event but that's outside my skill level. For the time being I've come up with this which solves the issue on Android 3.1 but not for 2.3. In the later, the field is blurred (at least visibly) but the keyboard stays visible. However, as soon as you touch *anything* on the screen - mask or keyboard - the keyboard goes away.

This is where i am with this, and if anyone could demonstrate something thats a bit more effective (or, dare i say "proper") it would be much appreciated.

(this is a cleaned up version of the above examples which contained function calls, etc, that were absent...)



function removeMsgFocus(o,targetElement){
Ext.getCmp('FORM_msgText').blur();
}


var createTipForm = new Ext.form.FormPanel({
id:'createTipForm',
items:[{xtype:'fieldset',
items: [
{
xtype:'textareafield',
name:'message',
id:'FORM_msgText',
label:'Your Tip',
required:true,
maxRows:'8',
maxLength:GLOB_max_length
},
{
xtype:'selectfield',
name:'arthritis',
cls:'FORM_arthList',
label:'Arthritis Type',
required:true,
layout:{type:'vbox',align:'right'},
options: [{text:'one',value:'one'},{text:'two',value:'two'},{text:'three',value:'three'}]
},
{
xtype:'button',
text:'Submit',
ui:'action',
scope:this,
handler: function(o,e){
console.log('submit btn');
}
},
{
xtype:'button',
text:'Cancel',
ui:'action',
scope:this,
handler: function(o,e){
console.log('cancel btn');
}
}
] // close items list
}]
});

new Ext.Panel({
fullscreen:true,

layout:'card',
items:[createTipForm]
listeners:{
el:{
tap:removeMsgFocus,
delegate:['.FORM_arthList']
}
}
});