PDA

View Full Version : [INFOREQ] Selectlist items 'active' for picking even after select list is gone Sencha 1.1.0



CaseyK24
1 Jul 2011, 10:32 AM
Sencha Touch version tested:

1.1.0

Platform tested against:

Ipad or Desktop only
iOS 4.3.3

Description:

On any device which does not have the selectlist choice box on the bottom so Tablet (iPad) and desktop. When you pick on a select list and the list selection scrolled window pops up everything looks fine. You then pick a selection and most of the time it selects the item and the rest of the form works fine. About 10% of the time after the item is picked and the select list comes down, the item is picked fine but then when you pick the display where the select list used to be it still changes the item like the select list was still active and visible. It also blocks any other input from items that would be under the select list if it was still visible (like a Save button at the bottom of the form). This is not relevant to phone devices as the dial scroll at the bottom is used instead and works fine.

Test Case:



Steps to reproduce the problem:

add a selectfield to a form
run the app on a Ipad or Desktop (Chrome)
Pick select list and pick item
Repeat until you see that you can still select items from the list even when the select list is not visible anymore

The result that was expected:

When Selectlist is down after a select I expect it not to act like it is still up and active by picking new values when touching where the selectlist used to be

The result that occurs instead:

Can still pick items fro selectList as though it were still up and active

Possible fix:

unknown

mike.estes
1 Jul 2011, 12:36 PM
Thanks for reporting and for using the template. I set this to INFOREQ because I have not been able to reproduce the issue in my own tests (in Chrome 12). I realize in your report you have already said it doesn't happen every-time but so far I haven't gotten it to happen once. I think maybe the issue occurs under certain conditions due to other elements on the page and in certain layout/structure combinations, do you have a test case you could provide that you have positively triggered this behavior with? If so, I will test it out again and hopefully get this reproduced and the bug report pushed into our system.

CaseyK24
2 Jul 2011, 9:02 AM
Thanks for your quick reply. On Tuesday I will try to see if it's possible to narrow down the exact mouse or touch movements on the selectList that make it occur. I will also give the full form code with the other fields involved. I will also try to limit the other fields in the form to see if it also happens with limited fields in the full form. It is pretty distinct and obvious when it happens and then resolves itself when I pick the select field again and pick a new item.

Casey

CaseyK24
5 Jul 2011, 7:47 AM
I changed the form to just have one select field (items attached to a store). It works just fine with one select field only. When I add a second select field separated by one text field I can get the problem to happen pretty often.

If I pick on select field and make sure there are enough values to have to scroll to see all of them. Then I scroll one of the select fields a little bit - select a value. Then open the other select field - scroll those values a bit then pick one. Going back and forth between select fields the problem happens pretty fast - sometimes with only going back and forth once.

The problem again is when the select field is down but you click or touch over where the select field was when it was up it still changes the value of the select field and prevent and touch or click events for that area - say it it covers a save button when it it visible then you can't pick the save button even when the select field is down because it acts like it's still up.

Thanks,
Casey

jpongin
19 Sep 2011, 5:04 PM
This is happening to me as well with the same version and environment. This mostly happens when used on the iPad.

I have a temporary fix here:


/*
* BUG - When tapping on the drop down to choose your selection, the select element creates a panel with a list of
* selections and then displays it. Upon tapping on the selection, this selection panel is supposed to completely
* hide. However, this does not happen 100%. The bug is that there is some invisible panel which is left behind,
* blocking the controls underneath it. The net effect is that the user cannot interact with the blocked controls,
* and is left wondering why buttons, panels, or tabs cannot be tapped.
*
* The solution is to destroy the selection panel (instead of hiding it). Do this
* by registering a hide event handler and then destroy it onHide.
* */
Ext.override(Ext.form.Select, {
// @private
getListPanel: function() {
if (!this.listPanel) {
this.listPanel = new Ext.Panel({
floating : true,
stopMaskTapEvent : false,
hideOnMaskTap : true, //THIS DOES NOT WORK 100% ON TABLETS
cls : 'x-select-overlay',
scroll : 'vertical',
items: {
xtype: 'list',
store: this.store,
itemId: 'list',
scroll: false,
itemTpl : [
'<span class="x-list-label">{' + this.displayField + '}</span>',
'<span class="x-list-selected"></span>'
],
listeners: {
select : this.onListSelect,
scope : this
}
},
listeners: {
scope : this,
hide: function(c) {
//DESTORY IT ON HIDE. ALSO SET THE listPanel property to undefined.
this.listPanel = undefined;
c.destroy();
}
}
});
}


return this.listPanel;
}


// @private
,onListSelect: function(selModel, selected) {
if (selected) {
this.setValue(selected.get(this.valueField));
this.fireEvent('change', this, this.getValue());
}


this.listPanel.hide({
type: 'fade',
out: true,
scope: this
});


this.listPanel.destroy();
this.listPanel = undefined;
}
});

CaseyK24
20 Sep 2011, 6:07 AM
Hey jpogin,

Thanks for verifying the issue which I think happens quite often. I wound up making the form think it was a phone not a tablet so it used the scroller at the bottom as the select list not the popup window. I might try your solution as it is more elegant. Without a change the form was becoming unusable many times.

Thanks,
Casey

Orbiiter
6 Oct 2011, 9:51 PM
Hi,

Thought I would add my two cents and say that in my application - I have this bug as well (i.e. SelectField not disposing / hiding correctly, and elements are still selectable even though the SelectField container itself is not visible).

Given the application I am writing deals with numerous "Select" fields, I probably notice this more than some (perhaps 2-3% of the time?). I will try the fix outlined in this bug and report back. Until this is fixed, we can't really release our product so fingers crossed we don't notice any anomolies with the suggested fix.

Cheers,
Orbiiter.

EDIT: This is experienced on all desktop Chrome (lastest version), iOS (iPad specifically) and Safari Desktop (Windows). Haven't tested iPhones as our application does not target phones.

jpongin
7 Oct 2011, 4:50 AM
Yes, please let me know if it works for you. So far I haven't seen any issues. If you walk through the code, it's a bit of a "timing" hack.