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,553
    Vote Rating
    1272
      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! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  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
  •