[SALESFORCE] Grid menu throws cannot call addEventListener method error

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.

Hi all,

I was able to narrow this down to the EventHelper.addElementListener() method.

LWC does not support the options object in addEventListener(). Those options are constructed from the handlerSpec and defaults. The Salesforce specific override for addElementListener() removes certain properties from the handlerSpec: capture, once, and passive. But those values remain on the defaults object, so the EventHelper.createHandler() method restores them in the final spec object.

I hope this is making sense thus far.

The workaround I found is to remove unwanted properties from the defaults before passing them into the overridden addElementListener.

class EventHelperOverrideAddListener {
    static get target() {
        return {
            class: EventHelper
        };
    }    
    static addElementListener(element, eventName, handlerSpec, defaults) {
        if ((element == null ? void 0 : element.nodeType) === 11 && handlerSpec) {
            delete handlerSpec.capture;
            delete handlerSpec.once;
            delete handlerSpec.passive;            
            defaults = { ...defaults };            
            delete defaults.capture;
            delete defaults.once;
            delete defaults.passive;
        }        
        return this._overridden.addElementListener.call(this, element, eventName, handlerSpec, defaults);
    }
}

bryntum / support

[SALESFORCE] Grid menu throws cannot call addEventListener method error #9204