Hybrid View

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-3129 in 2.3.
  1. #1
    Sencha User
    Join Date
    Dec 2007
    Location
    Budapest, Hungary
    Posts
    83
    Vote Rating
    1
    Zolcsi is on a distinguished road

      0  

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

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


    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:
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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'
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    73
    Vote Rating
    1
    elad101 is on a distinguished road

      0  

    Default


    Hi Mitchell,
    Any new inputs on this issue?

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Location
    Budapest, Hungary
    Posts
    83
    Vote Rating
    1
    Zolcsi is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

    Default


    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