Ext.field.Select valueselector gives focus to the item below the button

**Zolcsi** · 13 Jul 2012 12:45 AM

REQUIRED INFORMATION

Sencha Touch version tested:

Sencha Touch 2.0.1
Sencha Touch 2.0.1.1

Browser versions tested against:

Safari (on iOS 5.1.1 and iOS 5.1)

DOCTYPE tested against:

HTML (<!doctype html>)

Description:

I created a form with some elements. The second element is a select field. After I click on the field, the list pops up (this is an iPhone, so the list is as the bottom of the screen). Then I select the preferred option and click on "OK". After that the list gets hidden, correct option is shown in the select field, this is all OK. But the field which was behind the OK button gets the focus. It seems like the tap event is forwarded to the field below the OK button. Note: The cancel button has the same behaviour

Steps to reproduce the problem:

See the attached video on how to reproduce the problem. (In the video at the end I click on the Cancel button, which is "Mégsem")
If you would like to test it for yourself, you can use http://demo.avalonclub.hu (user: demo, password: demo)

The result that was expected:

Focus should stay on the selectfield

The result that occurs instead:

The field below the button gets the focus

HELPFUL INFORMATION

Screenshot or Video:

http://youtu.be/fKN5p07MdM4

See this URL for live test case: http://demo.avalonclub.hu

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

iOS 5.1

**mitchellsimoens** · 13 Jul 2012 5:15 AM

Thank you for the report. Looks like the tap event is getting passed through.

Ran this on the iOS simulator using the iPhone device. When the cancel is over the textarea it will reproduce.

Code:

new Ext.form.Panel({
    fullscreen : true,
    items      : [
        {
            xtype       : 'datepickerfield',
            placeHolder : 'Date'
        },
        {
            xtype       : 'textareafield',
            placeHolder : 'TextArea'
        }
    ]
});

**elad101** · 19 Jul 2012 12:41 AM

Hi Mitchell,
Any new inputs on this issue?

**uksencha** · 19 Jul 2012 2:47 PM

I have a similar issue on selects with the component below receiving a tap through.

I'm using the following to get around the problem - I guess its not ideal but it seems to work other than a brief 'flash' on the component below when it goes from disabled to enabled.

On the select field add the following event (I'm using jquery in my app but I'm sure you could do it using pure Sencha - replace the click with a tap event for a touch device) :

$('#idOfSelectField -x-field-mask').click(onMaskClick);

onMaskClick = function () {
componentUnderneath = Ext.getCmp('idOfComponentUnderneath');
componentUnderneath.disable();
}

Add a listener for the change event on the select field:

listeners: {
change: selectHandler
}

selectHandler = function () {
componentUnderneath = Ext.getCmp('idOfComponentUnderneath');
Ext.defer(function() {
componentUnderneath.enable();
}, 400);
}

Its a bit of a hack but it gets around it until this is fixed in the framework.

Chris

**Zolcsi** · 24 Jul 2012 2:24 AM

uksencha, that sounds like a good idea, however, unfortunately I wasn't able to find a good event to disable the fields. mousedown doesn't work and there is no click or tap event on a select field.
I've also tried focus, so I could disable the fields upon showing the list of the select field, but the focus event doesn't fire.
So I guess I'm stuck waiting for Sencha.

**uksencha** · 24 Jul 2012 3:00 AM

Hi Zolcsi

I see what you mean.

I'm not in the office at the moment so I can't try this but maybe this would work:

selectField = document.getElementById(idOfSelectField);

maskField = selectField.children[1].children[1];

maskField.addEventListener('touchstart',onMaskClick);

I might have made a mistake because I'm doing it from my head but something like that might work for you.

Good Luck !

Chris

**Thorzul** · 23 Aug 2012 9:38 AM

Any update on this?

I have more examples of this issue on an actual iOS device.

1) If you have a button on a page that, when clicked, transitions to another page, and on that new page have a TextField that lines up with where the button was, the TextField will automatically get focus and the keyboard will pop up.

2) Create a form full of TextFields with their labels above the inputs. Focus on one of the TextFields, bringing up the keyboard. If you try to dismiss the keyboard by clicking the area between two fields (basically, on a label) the keyboard will dismiss, and then the TextField that was above where you clicked will get the focus and the keyboard will come back.

A possible solution for #1 is to call stopEvent() on the event object after handling the button's tap. That's not ideal because you would need to figure out all of the possible places it can occur.

I'll post more as I find it. Thanks.

**hanneslarsson** · 30 Oct 2012 12:42 PM

Hi

We have the same issue and pretty much tried all the ugly solutions to stop the tap event from going through the Done-button and on the button that sits below the selectfield popup.

We really would appreciate the help here.

//hannes

**uksencha** · 30 Oct 2012 1:32 PM

Hi Hannes

Did disabling the button underneath temporarily not work or are you just looking for a more elegant solution (if so I'm afraid I haven't yet come up with one and I'm still using the heavy handed approach)

Chris

Ext.field.Select valueselector gives focus to the item below the button

Thread Tools

Search Thread

Display

Ext.field.Select valueselector gives focus to the item below the button

Ext.field.Select valueselector gives focus to the item below the button

Looking for a solution

Looking for a solution