Our blazing fast Grid component built with pure JavaScript


Post by ahuynh »

Bryntum grid edit mode in Firefox is not behaving correctly, but it behaves correctly in Google Chrome.

When editing a grid cell in Firefox, the value is not updated but changed back to the previous value when double click to a different cell on the same column. In Google Chrome, the cell edit works correctly and I don't see this same behavior.

Please see attached video for this issue.

We created this Grid Demo based on the Bryntum Grid examples. Can you please let me know why the grid cell edit doesn't behave correctly in Firefox?

Note: I have updated Firefox to the latest version and also clear Caches and Cookie, but still seeing the same bug.

Attachments
Bryntum Cell Edit Behave Incorrectly in Firefox.mov
(20.49 MiB) Downloaded 48 times

Post by marcio »

Hey ahuynh,

Thanks for the report, could you please provide more detail about how does your configuration look like?? I edited all the fields available in our basic demo https://www.bryntum.com/examples/grid/basic/ and worked correctly on Chrome and Firefox.

Best regards,
Márcio


Post by ahuynh »

Hi Marcio,

Thank you for looking into this! Below is our configuration inside the gridDemo.js file:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getInstance } from 'c/bryntumBootstrap';
import { COLUMNS, FIELDS, DATA } from './grid';

export default class GridDemo extends LightningElement {
    ready = false;
    error = null;

handleWidgetReady({ target }) {
    this.createGrid(target);
    this.loadGridData();
}

handleWidgetError({ detail }) {
    const { message } = detail;

    this.error = message || 'Unable to load the Grid component';
}

handleFinishCellEdit({ editorContext }) {
    const { value } = editorContext;

    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Edited Grid Value',
            message: String(value),
            variant: 'success',
        })
    );
}

createGrid(host) {
    try {
        // Instantiate grid with minimal config
        this.gridId = host.create('Grid', this.initialConfig);
    } catch (e) {
        this.error = e.message;
    }
}

loadGridData() {
    const { grid } = this;

    if (!grid) {
        return;
    }

    try {
        grid.store.add(DATA);
        this.ready = true;
    } catch (e) {
        this.error = e.message;
    }
}

get initialConfig() {
    return {
        features: {
            stripe: false,
            regionResize: true,
            summary: true,
        },
        columnLines: true,
        columns: COLUMNS,
        store: {
            fields: FIELDS,
        },
        selectionMode: {
            row: true,
            checkbox: true,
            showCheckAll: true,
        },
        listeners: {
            finishCellEdit: (event) => this.handleFinishCellEdit(event),
        },
    };
}

get grid() {
    // Get an instance of the treeGrid widget
    return getInstance(this.gridId);
}

get isLoading() {
    const { ready, error } = this;

    return !(ready || error);
}
}

And below is the COLUMNS config inside grid.js file:

export const COLUMNS = [
    {
        width: 70,
        locked: true,
        enableHeaderContextMenu: false,
        enableCellContextMenu: false,
        align: 'center',
        type: 'action',
        actions: [
            {
                cls: 'b-sf-utility-copy',
                tooltip: 'Copy row',
                visible: ({ record }) => record.done,
                onClick: ({ record }) => {
                    console.log(record.done); // eslint-disable-line no-console
                },
            },
            {
                cls: 'b-sf-utility-delete',
                tooltip: 'Delete row',
                visible: ({ record }) => record.done,
                onClick: ({ record }) => {
                    console.log(record.done); // eslint-disable-line no-console
                },
            },
            {
                cls: 'b-sf-utility-warning slds-button_icon-warning',
                tooltip: 'This is your final warning Jahiel',
                visible: ({ record }) => !record.done,
                onClick: ({ record }) => {
                    console.log(record.done); // eslint-disable-line no-console
                },
            },
            {
                cls: 'b-sf-utility-error slds-text-color_error',
                tooltip: 'Please resolve errors',
                visible: ({ record }) => !record.done,
                onClick: ({ record }) => {
                    console.log(record.done); // eslint-disable-line no-console
                },
            },
        ],
    },
    {
        type: 'rownumber',
        locked: true,
    },
    {
        text: 'Template',
        field: 'name',
        flex: 1,
        type: 'template',
        template: ({ record }) => `Hi ${record.data.name}!`,
        locked: true,
        sum: 'count',
        summaryRenderer: ({ sum }) => `Total: ${sum}`,
    },
    {
        text: 'Percent',
        field: 'percent',
        flex: 1,
        type: 'percent',
        sum: 'min',
        summaryRenderer: ({ sum }) => {
            return 'Min: ' + sum;
        },
    },
    {
        text: 'City',
        field: 'city',
        flex: 1,
        editor: {
            type: 'dropdown',
            multiSelect: true,
            //Dear Dev:Julianne recommends disabling chipview for multiselect inside Grid cell
            chipView: false,
            items: [
                'Stockholm',
                'Moscow',
                'Paris',
                'Washington',
                'San Francisco',
                'New York',
                'Barcelona',
                'Dubai',
            ],
        },
    },
    {
        text: 'Date',
        field: 'start',
        flex: 1,
        type: 'date',
        format: 'MMMM Do YYYY',
        headerRenderer: ({ column }) =>
            `<abbr class="slds-required" title="required">* </abbr> ${column.text}`,
    },
    {
        text: 'Time',
        field: 'time',
        flex: 1,
        type: 'time',
        format: 'LT',
    },
    {
        text: 'Link (Readonly)',
        field: 'team',
        flex: 1,
        type: 'template',
        editor: false,
        template: (data) =>
            `<div class="slds-size_1-of-1"><div class="slds-grid slds-grid_align-spread"><div class="slds-col"><a href="//www.bryntum.com" target="_blank">${data.record.data.team}</a></div><div class="slds-col"><i class="slds-button__icon_lock slds-icon-text-default b-sf-utility-lock slds-m-left_x-small"></i></div></div></div>`,
    },
    {
        text: 'Score (Readonly)',
        field: 'score',
        flex: 1,
        type: 'template',
        editor: false,
        template: (data) =>
            `<div class="slds-size_1-of-1"><div class="slds-grid slds-grid_align-end"><div class="slds-col">${data.record.data.score}</div><div class="slds-col"><i class="slds-button__icon_lock slds-icon-text-default b-sf-utility-lock slds-m-left_x-small"></i></div></div></div>`,
    },
    {
        field: 'done',
        text: 'Billable (Readonly)',
        flex: 1,
        type: 'template',
        editor: false,
        template: ({ value }) => {
            return value
                ? `<i class="slds-button_icon b-sf-utility-check"></i>`
                : '';
        },
    },
    {
        type: 'rating',
        text: 'Rating',
        cellCls: 'satisfaction',
        max: 5,
        field: 'rating',
    },
    {
        type: 'action',
        field: 'rating',
        actions: [
            {
                cls: 'b-sf-utility-ban',
                tooltip: 'Decrease rating',
                onClick: ({ record }) => {
                    if (record.rating > 1) {
                        record.rating--;
                    }
                },
            },
            {
                cls: 'b-sf-utility-new',
                tooltip: 'Increase rating',
                onClick: ({ record }) => {
                    if (record.rating < 5) {
                        record.rating++;
                    }
                },
            },
        ],
    },
    {
        text: 'Buttons',
        field: 'button',
        flex: 1,
        align: 'center',
        type: 'template',
        template: (data) =>
            `<button class="slds-button ${data.record.data.button} slds-button_stretch">${data.record.data.button}</button>`,
    },
    {
        align: 'center',
        width: 30,
        type: 'widget',
        widgets: [
            {
                type: 'button',
                tooltip: 'More actions',
                cls: 'slds-button slds-button_icon slds-button_icon-x-small slds-button_icon-border-filled',
                iconCls: 'slds-m-left_none',
                menu: [
                    {
                        text: 'Show details',
                    },
                    {
                        text: 'Delete',
                    },
                ],
            },
        ],
    },
];

export const FIELDS = [
    {
        name: 'start',
        type: 'date',
    },
];

export const DATA = [
    {
        id: 1,
        title: 'Row 0',
        name: 'Don A Taylor',
        firstName: 'Don',
        surName: 'Taylor',
        city: 'Moscow',
        team: 'Paris Tigers',
        age: 30,
        food: 'Salad',
        color: 'Black',
        score: 880,
        rank: 99,
        start: '2019-02-05T21:00:00.000Z',
        finish: '2019-02-20T21:00:00.000Z',
        time: '2019-12-31T23:10:00.000Z',
        percent: 13,
        done: false,
        rating: 2,
        relatedTo: 3,
        button: 'slds-button',
    },
    {
        id: 2,
        title: 'Row 1',
        name: 'John B Adams',
        firstName: 'John',
        surName: 'Adams',
        city: 'Paris',
        team: 'Washington Horses',
        age: 64,
        food: 'Bolognese',
        color: 'Orange',
        score: 850,
        rank: 55,
        start: '2019-01-25T21:00:00.000Z',
        finish: '2019-02-22T21:00:00.000Z',
        time: '2020-01-01T17:00:00.000Z',
        percent: 13,
        done: false,
        rating: 2,
        relatedTo: 9,
        button: 'slds-button_neutral',
    },
    {
        id: 3,
        title: 'Row 2',
        name: 'Doug C Jones',
        firstName: 'Doug',
        surName: 'Jones',
        city: 'Stockholm',
        team: 'New York Hens',
        age: 30,
        food: 'Pancake',
        color: 'Pink',
        score: 330,
        rank: 100,
        start: '2019-02-07T21:00:00.000Z',
        finish: '2019-02-18T21:00:00.000Z',
        time: '2019-12-31T23:55:00.000Z',
        percent: 85,
        done: true,
        rating: 3,
        relatedTo: 3,
        button: 'slds-button_brand',
    },
    {
        id: 4,
        title: 'Row 3',
        name: 'James D Davis',
        firstName: 'James',
        surName: 'Davis',
        city: 'Barcelona',
        team: 'Moscow Lions',
        age: 87,
        food: 'Pancake',
        color: 'Green',
        score: 790,
        rank: 33,
        start: '2019-01-26T21:00:00.000Z',
        finish: '2019-02-21T21:00:00.000Z',
        time: '2020-01-01T00:55:00.000Z',
        percent: 30,
        done: true,
        rating: 0,
        relatedTo: 11,
        button: 'slds-button_outline-brand',
    },
    {
        id: 5,
        title: 'Row 4',
        name: 'Mike E Johnson',
        firstName: 'Mike',
        surName: 'Johnson',
        city: 'Moscow',
        team: 'New York Roosters',
        age: 14,
        food: 'Pancake',
        color: 'Green',
        score: 780,
        rank: 60,
        start: '2019-02-04T21:00:00.000Z',
        finish: '2019-03-02T21:00:00.000Z',
        time: '2020-01-01T19:35:00.000Z',
        percent: 26,
        done: true,
        rating: 2,
        relatedTo: 12,
        button: 'slds-button_destructive',
    },
    {
        id: 6,
        title: 'Row 5',
        name: 'Don F Johnson',
        firstName: 'Don',
        surName: 'Johnson',
        city: 'Dubai',
        team: 'Paris Tigers',
        age: 18,
        food: 'Fish n chips',
        color: 'Red',
        score: 640,
        rank: 5,
        start: '2019-02-09T21:00:00.000Z',
        finish: '2019-02-21T21:00:00.000Z',
        time: '2020-01-01T14:40:00.000Z',
        percent: 78,
        done: true,
        rating: 4,
        relatedTo: 6,
        button: 'slds-button_text-destructive',
    },
    {
        id: 7,
        title: 'Row 6',
        name: 'Jane G McGregor',
        firstName: 'Jane',
        surName: 'McGregor',
        city: 'Stockholm',
        team: 'Moscow Eagles',
        age: 78,
        food: 'Fish n chips',
        color: 'Green',
        score: 290,
        rank: 3,
        start: '2019-01-24T21:00:00.000Z',
        finish: '2019-02-04T21:00:00.000Z',
        time: '2020-01-01T08:55:00.000Z',
        percent: 64,
        done: true,
        rating: 0,
        relatedTo: 12,
        button: 'slds-button_success',
    },
    {
        id: 8,
        title: 'Row 7',
        name: 'Jane H Thomas',
        firstName: 'Jane',
        surName: 'Thomas',
        city: 'New York',
        team: 'Paris Cougars',
        age: 65,
        food: 'Fish n chips',
        color: 'Black',
        score: 400,
        rank: 50,
        start: '2019-01-14T21:00:00.000Z',
        finish: '2019-02-06T21:00:00.000Z',
        time: '2020-01-01T17:00:00.000Z',
        percent: 13,
        done: false,
        rating: 2,
        relatedTo: 16,
        button: 'slds-button',
    },
    {
        id: 9,
        title: 'Row 8',
        name: 'Lisa I Anderson',
        firstName: 'Lisa',
        surName: 'Anderson',
        city: 'New York',
        team: 'Stockholm Tigers',
        age: 14,
        food: 'Burger',
        color: 'Orange',
        score: 890,
        rank: 70,
        start: '2019-01-24T21:00:00.000Z',
        finish: '2019-02-09T21:00:00.000Z',
        time: '2020-01-01T08:10:00.000Z',
        percent: 30,
        done: false,
        rating: 3,
        relatedTo: 11,
        button: 'slds-button_neutral',
    },
    {
        id: 10,
        title: 'Row 9',
        name: 'Don J Thomas',
        firstName: 'Don',
        surName: 'Thomas',
        city: 'Stockholm',
        team: 'Barcelona Cougars',
        age: 45,
        food: 'Salad',
        color: 'Black',
        score: 10,
        rank: 96,
        start: '2019-01-25T21:00:00.000Z',
        finish: '2019-02-11T21:00:00.000Z',
        time: '2020-01-01T04:30:00.000Z',
        percent: 24,
        done: false,
        rating: 4,
        relatedTo: 11,
        button: 'slds-button_brand',
    },
    {
        id: 11,
        title: 'Row 10',
        name: 'Doug K Jackson',
        firstName: 'Doug',
        surName: 'Jackson',
        city: 'Barcelona',
        team: 'Moscow Cats',
        age: 16,
        food: 'Fish n chips',
        color: 'Red',
        score: 270,
        rank: 3,
        start: '2019-01-29T21:00:00.000Z',
        finish: '2019-02-07T21:00:00.000Z',
        time: '2020-01-01T05:15:00.000Z',
        percent: 38,
        done: true,
        rating: 1,
        relatedTo: 14,
        button: 'slds-button_outline-brand',
    },
    {
        id: 12,
        title: 'Row 11',
        name: 'James L Ewans',
        firstName: 'James',
        surName: 'Ewans',
        city: 'Moscow',
        team: 'Dubai Dogs',
        age: 30,
        food: 'Salad',
        color: 'Black',
        score: 140,
        rank: 87,
        start: '2019-01-25T21:00:00.000Z',
        finish: '2019-02-14T21:00:00.000Z',
        time: '2020-01-01T02:05:00.000Z',
        percent: 64,
        done: false,
        rating: 1,
        relatedTo: 18,
        button: 'slds-button_destructive',
    },
    {
        id: 13,
        title: 'Row 12',
        name: 'Jenny M Brown',
        firstName: 'Jenny',
        surName: 'Brown',
        city: 'Dubai',
        team: 'Stockholm Eagles',
        age: 56,
        food: 'Waffles',
        color: 'Orange',
        score: 560,
        rank: 69,
        start: '2019-01-07T21:00:00.000Z',
        finish: '2019-01-16T21:00:00.000Z',
        time: '2020-01-01T01:20:00.000Z',
        percent: 99,
        done: true,
        rating: 4,
        relatedTo: 14,
        button: 'slds-button_text-destructive',
    },
    {
        id: 14,
        title: 'Row 13',
        name: 'Doug N Ewans',
        firstName: 'Doug',
        surName: 'Ewans',
        city: 'Barcelona',
        team: 'New York Dogs',
        age: 61,
        food: 'Pancake',
        color: 'Teal',
        score: 550,
        rank: 34,
        start: '2019-01-19T21:00:00.000Z',
        finish: '2019-01-30T21:00:00.000Z',
        time: '2019-12-31T21:10:00.000Z',
        percent: 97,
        done: false,
        rating: 2,
        relatedTo: 20,
        button: 'slds-button_success',
    },
];

Post by alex.l »

Hi ahuynh,

I applied all your configs to our LWC Grid example, all works well.
I cannot test it with the way you created a component, you use some bryntumBootstrap lib which we don't have.
But, it looks not relevant to that, there might be some difference via native events triggering by Firefox. In case you don't have overrides in your custom code.

We need more time to investigate it deeply. We will let you know if we found something.

All the best,
Alex


Post by ahuynh »

Thanks Alex! Since we can't reproduce this on Bryntum examples and LWC Grid examples, this bug might not have anything to do with Bryntum.

Please disregard this case, we will do more investigation on our end. Thank you so much for looking into this, and sorry for the confusion!


Post Reply