support
support copied to clipboard
bryntum
[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);
}
}
alternative solution could be to change listener target from shadow root to the container element which supports listener options
