Results 1 to 5 of 5

Thread: Double focus and cursor with textfield and datefield

Hybrid View

Previous Post Previous Post   Next Post Next Post
    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
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,422
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
      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
      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
      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;
    	    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •