Grid row update steals current focus.

**poyhonen** · 24 Oct 2012 11:28 PM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.2

Browser versions tested against:

Chrome 22.0.1229.94

Description:

Grid row is focused when it is updated by store. This steals the focus from the currently focused field.

Steps to reproduce the problem:

The sample code shows the problem

The result that was expected:

The focus would be kept in the text field.

The result that occurs instead:

The text field is no longer focused.

Test Case:

Code:

    Ext.onReady(function()
    {
        var grid = Ext.create('Ext.grid.Panel', {
            width: 600,
            store: {
                fields: ['id', 'value'],
                data: [
                    {id: 1, value: 'Initial value'},
                    {id: 2, value: 'Initial value'}
                ]
            },
            columns: [
                {text: 'id', dataIndex: 'id'},
                {text: 'value', dataIndex: 'value', flex: 1}
            ],
            renderTo: Ext.getBody()
        });


        var form = Ext.create('Ext.form.Panel', {
            title: 'Form',
            bodyPadding: 5,
            width: 600,
            layout: 'anchor',
            defaultType: 'textfield',
            items: [
            {
                fieldLabel: 'value',
                name: 'value',
                anchor: '100%'
            }]
        });


        new Ext.container.Viewport(
        {
            layout: 'auto',
            items: [ grid, form ]
        });


        form.down('.textfield').focus();
        grid.getSelectionModel().select(0);


        // ExtJS 4.1.1 Bug: select a row, update record, selection will be lost.
        setTimeout(function() {
            grid.getStore().getRange(0, 0)[0].set('value', 'Updated value');
        }, 1000);
    });

HELPFUL INFORMATION

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Windows 7

**kevin.chen** · 26 Oct 2012 11:39 AM

I am working on this now

**kevin.chen** · 26 Oct 2012 1:48 PM

I can not reproduce this issue, I tested in 4.1.2, it is working.
I also tested in 4.1.3, it works, I can only reproduce this issue in 4.1.1

**evant** · 28 Oct 2012 4:20 PM

Agreed with Kevin, I cannot reproduce this in the latest code.

**poyhonen** · 29 Oct 2012 12:17 AM

For me it still does the same with the 4.1.3 version. After 1 second the focus is no longer in the text field.
You mean that for you the focus stays on that field?

I tested this with Firefox (14.0.1) and IE9 and I got the same result.

**Jan Pogadl** · 30 Oct 2012 7:34 AM

I got the same Problem and the provided Test Case is triggering this Issue.

Firefox 16.0.2
Ext 4.1.3
Win7

I added a slightly modified TestCase. It is impossible for me to type '123' in one go into the TextField.

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>
            InfoBar Example
        </title>
        <link rel="stylesheet" type="text/css" href="./ext-4.1.3/resources/css/ext-all.css">        
        <script type="text/javascript" src="./ext-4.1.3/ext-all-debug.js"></script>

        <script type="text/javascript">
            Ext.onReady(function()
            {
                var grid = Ext.create('Ext.grid.Panel', {
                    width: 600,
                    store: {
                        fields: ['id', 'value'],
                        data: [
                            {id: 1, value: 'Initial value'},
                            {id: 2, value: 'Initial value'}
                        ]
                    },
                    columns: [
                        {text: 'id', dataIndex: 'id'},
                        {text: 'value', dataIndex: 'value', flex: 1}
                    ],
                    renderTo: Ext.getBody()
                });


                var form = Ext.create('Ext.form.Panel', {
                    title: 'Form',
                    bodyPadding: 5,
                    width: 600,
                    layout: 'anchor',
                    defaultType: 'textfield',
                    items: [
                    {
                        fieldLabel: 'value',
                        name: 'value',
                        anchor: '100%'
                    }]
                });


                new Ext.container.Viewport(
                {
                    layout: 'auto',
                    items: [ grid, form ]
                });


                form.down('.textfield').focus();
                grid.getSelectionModel().select(0);

                form.down('.textfield').on('change', function(field, newVal, oldVal){
                    grid.getStore().getRange(0, 0)[0].set('value', newVal);
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>

**poyhonen** · 5 Nov 2012 12:04 AM

Any chance of reopening this issue as this still occurs with 4.1.3?

Grid row update steals current focus.

Thread Tools

Search Thread

Display

Grid row update steals current focus.

Grid row update steals current focus.