Our blazing fast Grid component built with pure JavaScript


Post by jinc »

Hello!

On Salesforce Org, when the grid is displayed and you right click on the grid to display the edit widget. It throws an error that it cannot add event listeners. This error appears on the scheduler and gantt as well.

Grid Configuration

this.grdId = host.create('Grid', {
                features: {
                    group: false,
                },

                // Headers will ripple on tap in Material theme
                ripple: {
                    delegate: '.b-grid-header',
                },

                columns: [
                    {
                        text: 'Name',
                        field: 'name',
                        flex: 2,
                        editor: {
                            type: 'textfield',
                            required: true,
                        },
                    },
                    {
                        text: 'Age',
                        field: 'age',
                        width: 100,
                        type: 'number',
                    },
                    {
                        text: 'City',
                        field: 'city',
                        flex: 1,
                    },
                    {
                        text: 'Food',
                        field: 'food',
                        flex: 1,
                    },
                    {
                        text: 'Color (not sortable)',
                        field: 'color',
                        flex: 1,
                        sortable: false,
                        renderer({ cellElement, value }) {
                            // renderer that sets text color = text
                            cellElement.style.color = value;
                            return value || '';
                        },
                    },
                ],

                data: [
                    {
                        name: 'Don A Taylor',
                        age: 30,
                        city: 'Moscow',
                        food: 'Salad',
                        color: 'Black',
                    },
                    {
                        name: 'John B Adams',
                        age: 65,
                        city: 'Paris',
                        food: 'Bolognese',
                        color: 'Orange',
                    },
                    {
                        name: 'John Doe',
                        age: 40,
                        city: 'London',
                        food: 'Fish and Chips',
                        color: 'Blue',
                    },
                    {
                        name: 'Maria Garcia',
                        age: 28,
                        city: 'Madrid',
                        food: 'Paella',
                        color: 'Green',
                    },
                    {
                        name: 'Li Wei',
                        age: 35,
                        city: 'Beijing',
                        food: 'Dumplings',
                        color: 'Yellow',
                    },
                    {
                        name: 'Sara Johnson',
                        age: 32,
                        city: 'Sydney',
                        food: 'Sushi',
                        color: 'Purple',
                    },
                    {
                        name: 'Lucas Brown',
                        age: 22,
                        city: 'Toronto',
                        food: 'Poutine',
                        color: 'Orange',
                    },
                    {
                        name: 'Emma Wilson',
                        age: 27,
                        city: 'Paris',
                        food: 'Croissant',
                        color: 'Pink',
                    },
                    {
                        name: 'Ivan Petrov',
                        age: 45,
                        city: 'St. Petersburg',
                        food: 'Borscht',
                        color: 'Grey',
                    },
                    {
                        name: 'Zhang Ming',
                        age: 50,
                        city: 'Shanghai',
                        food: 'Hot Pot',
                        color: 'Purple',
                    },
                    {
                        name: 'Sophia Martinez',
                        age: 20,
                        city: 'Mexico City',
                        food: 'Tacos',
                        color: 'Crimson',
                    },
                    {
                        name: 'Noah Smith',
                        age: 55,
                        city: 'Cape Town',
                        food: 'Biltong',
                        color: 'Turquoise',
                    },
                    {
                        name: 'Isabella Jones',
                        age: 33,
                        city: 'Rio de Janeiro',
                        food: 'Feijoada',
                        color: 'Magenta',
                    },
                    {
                        name: 'Ethan Taylor',
                        age: 29,
                        city: 'Chicago',
                        food: 'Deep-Dish Pizza',
                        color: 'Cyan',
                    },
                    {
                        name: 'Olivia Brown',
                        age: 37,
                        city: 'Berlin',
                        food: 'Schnitzel',
                        color: 'Maroon',
                    },
                    {
                        name: 'Mia Wilson',
                        age: 26,
                        city: 'Rome',
                        food: 'Pasta',
                        color: 'Olive',
                    },
                    {
                        name: 'Jacob Miller',
                        age: 60,
                        city: 'Amsterdam',
                        food: 'Stroopwafel',
                        color: 'Lime',
                    },
                    {
                        name: 'Chloe Davis',
                        age: 23,
                        city: 'Los Angeles',
                        food: 'Burger',
                        color: 'Teal',
                    },
                    {
                        name: 'Aiden Martinez',
                        age: 48,
                        city: 'Buenos Aires',
                        food: 'Asado',
                        color: 'Violet',
                    },
                    {
                        name: 'Liam Lee',
                        age: 38,
                        city: 'Seoul',
                        food: 'Kimchi',
                        color: 'Indigo',
                    },
                    {
                        name: 'Sophie Kim',
                        age: 21,
                        city: 'Tokyo',
                        food: 'Ramen',
                        color: 'Pink',
                    },
                    {
                        name: 'Alexander Nguyen',
                        age: 41,
                        city: 'Hanoi',
                        food: 'Pho',
                        color: 'Coral',
                    },
                    {
                        name: 'Ella Patel',
                        age: 19,
                        city: 'Mumbai',
                        food: 'Curry',
                        color: 'Amber',
                    },
                    {
                        name: 'James O Connor',
                        age: 34,
                        city: 'Dublin',
                        food: 'Irish Stew',
                        color: 'Green',
                    },
                    {
                        name: 'Isabelle Chen',
                        age: 31,
                        city: 'Hong Kong',
                        food: 'Dim Sum',
                        color: 'Brown',
                    },
                ],
                selectionMode: {
                    row: true,
                    checkbox: true,
                    showCheckAll: true,
                },
                listeners: {
                    finishCellEdit: (event) => this.handleFinishCellEdit(event),
                },
            });

Investigation Results
Based on the investigation results, it seems that when b-menu-1 element is trying to call addEventListener it throws an error saying that TheaddEventListenermethod on ShadowRoot does not support any options.. This error is thrown on the if condition statement calling addEventListener in the addElementListener function. It fails to add event listeners are doHideOrRealign and realignOnTransitionEnd.

One thing I noticed is that on function is called twice for each mentioned event, the first iteration for each event runs fine but, the second iteration throws an error. The second iteration is initiated in a setTimeout:

Attachments
floatingWidgetError.gif
floatingWidgetError.gif (1.79 MiB) Viewed 58 times
Screenshot 2024-05-10 at 10.39.45 AM.png
Screenshot 2024-05-10 at 10.39.45 AM.png (92.22 KiB) Viewed 58 times
Screenshot 2024-05-10 at 10.11.04 AM.png
Screenshot 2024-05-10 at 10.11.04 AM.png (283.35 KiB) Viewed 58 times

Post by Animal »

Is this the same as viewtopic.php?p=146261#p146261 ?


Post by jinc »

Yes it seems to be duplicated.


Post Reply