Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Jun 2013
    Location
    Belo Horizonte, MG, Brazil
    Posts
    11
    Vote Rating
    0
    schettino90 is on a distinguished road

      0  

    Default Double focus and cursor with textfield and datefield

    Double focus and cursor with textfield and datefield


    Ext version tested:
    • Sencha Touch 2.2.1 with PhoneGap API
    Browser/Devices versions tested against:
    • Tablet Samsung Galaxy Tab 2 7.0 GT-P3110 Wi-Fi 16 GB with Android 4.0.3
    Description:
    • Ext.field.Text and Ext.field.DatePicker - Double focus and cursor
    Steps to reproduce the problem:
    • Create a form and put a datepicker after textfield component.
    • Fill the value textfield component.
    • Click on the datefield component.
    • Click on the clear icon in the textfield.
    • At this moment, the cursor will be duplicated. When the keyboard is tapped, both fields will be filled.
    The result that was expected:
    • When I click on the clear icon, textfield should get the focus and datefield should blur the focus.
    The result that occurs instead:
    • The cursor is duplicated. The textfield and the datefield fields are filled same time.
    Test Case:

    This is the panel which I put my fields. As I use the SENCHA MVC, isn't possible put here all the code of my page.
    Code:
    {               xtype: 'panel',
                    id: 'addAtivFisicaExtra_pnlCampos',
                    scrollable: {
                        direction: 'vertical',
                        directionLock: true
                    },
                    flex:1,
                    items: [
                        {
                            id: 'addAtivFisicaExtra_txtNome',
                            xtype: 'textfield',
                            label: LANG('TX_LBL_ATIV_FISICA_EXTRA_NOME') + ':',
                            placeHolder: LANG('TX_LBL_ATIV_FISICA_EXTRA_NOME_PLACEHOLDER'),
                            labelWidth: '110px',
                            maxLength: 100,
                            // I try resolve the problem putting these following listeners, but doesn't worked
                            listeners: {
                                focus: function (el, e, eOpts) {
                                    var pnlCampos = Ext.getCmp('addAtivFisicaExtra_pnlCampos');
                                    for (var i = 0; i < pnlCampos.getItems().length; i++) {
                                        var item = pnlCampos.getAt(i);
                                        if (item.getId() != el.getId()) {
                                            if (item.blur) {
                                                item.blur();
                                            }
                                        }
                                    }
                                },
                                clearicontap: function (el, e, eOpts) {
                                    setTimeout(function () { el.focus(); }, 100);
                                }
                            }
                        },
                        {
                            id: 'addAtivFisicaExtra_selAtiv',
                            xtype: 'selectfield',
                            label: LANG('TX_LBL_ATIV_FISICA_EXTRA_NOME') + ':',
                            labelWidth: '110px',
                            usePicker: false
                        },
                        {
                            id: 'addAtivFisicaExtra_dtAtividade',
                            xtype: 'datepickerfield',
                            labelWidth: '110px',
                            label: LANG('TX_LBL_ATIV_FISICA_EXTRA_DATA') + ':',
                            placeHolder: LANG('G_SELECIONAR'),
                            picker: {
                                modal: false,
                                useTitles: true,
                                yearText: LANG('G_ANO'),
                                monthText: LANG('G_MES'),
                                dayText: LANG('G_DIA'),
                                maxDate: new Date(),
                                yearFrom: new Date().getFullYear() - 100,
                                yearTo: new Date().getFullYear(),
                                value: {
                                    day: new Date().getUTCDate(),
                                    month: new Date().getUTCMonth() + 1,
                                    year: new Date().getUTCFullYear()
                                },
                                doneButton: {
                                    iconMask: true,
                                    text: LANG('BT_DATEPICKER_SELECIONAR')
                                },
                                cancelButton: {
                                    iconMask: true,
                                    text: LANG('BT_DATEPICKER_CANCELAR')
                                },
                                slotOrder: LANG('DATEPICKER_ORDEM')
                            }
                        },
                        {
                            id: 'addAtivFisicaExtra_selTime',
                            xtype: 'selectfield',
                            label: LANG("TX_LBL_ATIV_FISICA_EXTRA_TEMPO") + ':',
                            usePicker: false,
                            labelWidth: '110px'
                        },
                        {
                            id: 'addAtivFisicaExtra_selType',
                            xtype: 'selectfield',
                            label: LANG('TX_LBL_ATIV_FISICA_EXTRA_TIPO') + ':',
                            usePicker: false,
                            labelWidth: '110px'
                        },
                        {
                            id: 'addAtivFisicaExtra_btnSalvar',
                            xtype: 'button',
                            text: LANG('BT_SALVAR'),
                            ui: 'confirm',
                            listeners: {
                                tap: function () {
                                    var btn = Ext.getCmp('addAtivFisicaExtra_btnSalvar');
                                    btn.setText(LANG('G_SALVAMENTO'));
                                    btn.disable();
                                    var pageAdd = Ext.getCmp('pageAddAtivFisicaExtra');
                                    callControllerFunction('PhysicalActivityController', 'salvarAtivFisicaExtra', function (ok) {
                                        btn.setText(LANG('BT_SALVAR'));
                                        btn.enable();
                                        if (ok) {
                                            pageAdd.limparCampos();
                                        }
                                    });
                                }
                            }
                        },
                        {
                            id: 'addAtivFisicaExtra_btnExcluir',
                            xtype: 'button',
                            text: LANG('BT_ATIV_FISICA_EXTRA_EXCLUIR'),
                            ui: 'decline',
                            style: 'margin:10px',
                            action: 'excluirAtivFisicaExtra'
                        }
                    ]
                },
    HELPFUL INFORMATION

    See the Video with bug's demonstration:
    http://sdrv.ms/15kmI8f

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Vote Rating
    851
    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


    Trying this outside of phonegap, I have this code:

    Code:
    Ext.Viewport.add({
        items : [
            {
                xtype : 'textfield',
                label : 'Text'
            },
            {
                xtype : 'datepickerfield',
                label : 'Date'
            }
        ]
    });
    I enter text in the textfield, tap on the date picker field to show the picker. I then close the picker and tap on the clear icon and try to type in the text field but it only types in the textfield.

    Can I get a locally runnable test case?
    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
    Jun 2013
    Location
    Belo Horizonte, MG, Brazil
    Posts
    11
    Vote Rating
    0
    schettino90 is on a distinguished road

      0  

    Default


    Locally and out of phonegap, it runs perfectly.
    This error only occur in Samsung Tablet that I specified above.
    I tested in other devices running Android 2.3 and 4.0 but the error doesn't occur.

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Location
    Belo Horizonte, MG, Brazil
    Posts
    11
    Vote Rating
    0
    schettino90 is on a distinguished road

      0  

    Default


    I ran the following code in tablet, and the same error ocurred.
    Code:
    Ext.application({
        name: 'BugTest',
        launch: function(){
            Ext.Viewport.add({
                items : [
                    {
                        xtype : 'textfield',
                        label : 'Text'
                    },
                    {
                        xtype : 'datepickerfield',
                        label : 'Date'
                    }
                ]
            });
        }
    });
    Please, watch a video: http://sdrv.ms/17IadUp
    Last edited by schettino90; 26 Jul 2013 at 6:07 AM. Reason: Video including.

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Location
    Belo Horizonte, MG, Brazil
    Posts
    11
    Vote Rating
    0
    schettino90 is on a distinguished road

      0  

    Default


    I solved it putting the following code in my css:

    Code:
    input[type="text"],input[type="email"],input[type="password"] {
    	    	-webkit-user-modify: read-write-plaintext-only !important;
    			-webkit-user-select:text !important;
    			-moz-user-select:-moz-text !important;
    			-moz-user-select:text !important;
    	    }

Thread Participants: 1

Tags for this Thread