ExtJS 7.x Modern Grid Selection Bug On Layout Animation

Question

How to fix it? I found a bug on layout card animation using grid component;

What happens? When you configure the layout for the "card" type and animation for "slide", "cover" etc... the line selection (record) stops working, when hovering over the record and clicking, the css of check gives bug.

When you change the layout to "card" simply, the grid selection works normally.

I'm using Windows 10, Edge browser;

See the bug on Sencha Fiddle

Answer 1

It is only the grid, dataview does not appear to have the same problem. Not getting the error on firefox.

Also only with Material theme because it is related to Fashion. I could not figure out how to import Fashion in the sencha fiddle so I could not add to your fiddle.

I found that if you unchecked ANY color in chrome devtools the problem goes away for one animation. So i messed around with resetting the colors and that seems to work. You have to change a color wait 10 milliseconds and change it back. You can change ANY color. I am changing the hovered-background-color but it can be anyone of the predefined colors. I change it just one shade and it is only for 10 milliseconds. It will only work with colors in the format of #11111.

I have not figured out what is causing the problem but I have a huge hack of a work around. I am sure this can be improved... also did not test much at all. Feel free to post any improvements, or if you figure out the underlying problem.

 items: [{
    xtype: "grid",
    ui: 'default',
    listeners: {
        show: function() {
            let cssVariables = Fashion.css.getVariables();
            let oldColor = cssVariables['hovered-background-color'];
            newColor = parseInt(oldColor, 16);
            newColor = '#' + (((newColor & 0x0000FF) + 1) | ((((newColor >> 8) & 0x00FF) + 1) << 8) | (((newColor >> 16) + 1) << 16)).toString(16);
            cssVariables['hovered-background-color'] = newColor;
            Fashion.css.setVariables(cssVariables);
            Ext.defer(function() {
                cssVariables['hovered-background-color'] = oldColor;
                Fashion.css.setVariables(cssVariables);
            }, 10);
        }
    },
    title: 'Simpsons',
    store: {
        fields: ['name', 'email', 'phone'],
        data: [
            { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
        ]
    },
    columns: [
        { text: 'Name',  dataIndex: 'name', width: 200 },
        { text: 'Email', dataIndex: 'email', width: 250 },
        { text: 'Phone', dataIndex: 'phone', width: 120, flex: 1 }
    ]
}, {