selectfield doesn't open on Android 2.2 (HTC Desire) - Sencha Touch v.1.1.0

[heringsfilet]

Sencha Touch version tested:

1.1.0

Platform tested against:

Android 2.2
iOS 4.2.1 (according to glarotech)

Description:

In Google Chrome I'm able to open the two selectFields but on the device - Android 2.2 (HTC Desire) nothing happens when I tap on the selectFields as long as there is no name specified.
The code for the behaviour of the selectField for Desktop is different to the one for the touch devices, so it's not unusual that this works in Chrome...

Test Case:


items: [
{tpl:[
'<h4>{title}</h4>',
'<tpl for=".">',
'<div class="field"><span class="label">date: </span><span class="value">{date}</span></div>',
'</tpl>',
'<br />'
],
tplWriteMode: 'append'},
{
xtype: 'fieldset',
id: 'fieldset',
title: 'update meeting',
defaults: {
labelWidth: '5em',
margin: '2em 0'
},
items: [
{
xtype: 'datepickerfield',
name: 'date',
label: 'date:',
picker: {
modal: true,
useTitles: true,
yearFrom: 2011,
yearTo: 2042
}
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
html: '<div class="x-form-label" style="width: 5em"><span>time:</span></div>'
},
{xtype: 'selectfield',
width: '5em',
options: hours
},
{html: ':'},
{xtype: 'selectfield',
width: '5em',
options: minutes,
}
]
},
{
xtype: 'button',
text: 'confirm',
margin: '4em',
handler: function(button, event){
alert("new");
}
},
]}
],Steps to reproduce the problem:

add a selectfield (with no 'name' specified)
run the app on a device

The result that was expected:

when tapping on the selectfield I expect it to open

The result that occurs instead:

selectfield doesn't react on a tap

Possible fix:

specifiy a name!

or

Do not use the picker!
change function showComponent on line 177 in Select.js from:

showComponent: function() {
if (Ext.is.Phone) {
this.getPicker().show();
}
else {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
}
},
to:


showComponent: function() {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);

},

[glarotech]

same issue here w/ iPhone...

[heringsfilet]

I changed my initial post according to the bug template.
Which version of iOS have you tested so that I can complete the bug report?

I assume this is due to a problem in the "Picker" class...

[glarotech]

iOS 4.2.1 (same issue, but not exactly your code)...
ST Forms example is working! I'll have a look at this code, to get the differences.

[heringsfilet]

I provided a short "fix" (see my first post)
It is not really beautiful as the behaviour was designed for the Desktop but it works.

[glarotech]

I figured out, that the select field / picker isn't working on Phones, as long as you haven't set the name property.

try to set it:


...
name: 'foobar'
...

[heringsfilet]

you're right. It works when you specifiy a name...
It's still a bug but no strange workaround is needed :)

[basty]

I had the same issue on my HTC Desire, thanks for this hint!
It is a problem to have the same value for the "id" and "name" attributes for the selectfield?

[glarotech]

yes and no... :)

I know there were some "issues" on some browsers (e.g. M$IE), if you had the following combination:


<div id="aDivElement">blah</div>
<div id="anotherDivElement" name="aDivElement">blah</div>

Because the HTML id and name attributes share(d) the same namespace, a simple ...getElementByID('aDivElement') matched both elements.

But: If you've the same value for the id & name attributes in the same element, it should work properly (as long as you don't need entities, because only the name attribute can contain entities).

-- domi