Is it impossible to dynamically instantiate an instance of lightning:menuItem?

This question is about a potential Lightning platform bug I ran across today. In my search for a resolution I ran across this post from last year that was never answered, that seems to have the identical problem: $A.createComponents() with lightning:buttonMenu and lightning:menuItem

If I'm doing something wrong with my code please let me know. That would certainly be preferred, as the fix will be a lot faster...

The error happens when you click on the menu...you get a popup that says the following:

Assertion Failed!: Descriptor for Config required for registration : undefined

Here is a stripped down reproduction of the bug.

Markup:

<aura:application extends="force:slds">

<lightning:buttonMenu aura:id="menu">
<lightning:menuItem />
</lightning:buttonMenu>

</aura:application>


Markup:

<aura:application extends="force:slds">

<aura:handler name="init" value="!this" action="!c.doInit" />

<lightning:buttonMenu aura:id="menu" />

</aura:application>


Controller:

(
doInit : function(component, event, helper)

$A.createComponent('lightning:menuItem', , function(newComponent)

let menu = component.find('menu');

let body = menu.get('v.body');
body.push(newComponent);
menu.set('v.body', body);
);

);


Working Solution

Thanks to great answers and some digging on my own, I've got a working solution that isn't as elegant as I would like but it gets the job done.

Because you can feed ComponentDefRef definitions to a buttonMenu as you instantiate it, you can solve this platform gap by always building your buttonMenu and your menuItem children at the same time. Here is some sample code from the project I was working on this for:

/*
* Create representations of each lightning:buttonMenu that we would like to instantiate
*/
let menusToCreate = ;

// for each column we need to filter
for (let fieldName in filterOptions)
if (filterOptions.hasOwnProperty(fieldName))

let filterData = filterOptions[fieldName],
children = [
attributes:
values:
checked: false,
label: '-- All --',
value: '--all--'

,
componentDef: 'markup://lightning:menuItem'
];

// for each possible filter choice on this column, create a child that represents a lightning:menuItem
filterData.forEach(function (choice)

// this JSON structure is very specific and represents a ComponentDefRef to the Aura framework
children.push(
attributes:
values:
checked: choice.checked,
label: choice.label,
value: choice.value

,
componentDef: 'markup://lightning:menuItem'
);
);

// now that we have all the children, add this menu to our list of dynamic components to build
menusToCreate.push(['lightning:buttonMenu',
'aura:id': fieldName,
'onselect': component.getReference('c.filterChosen'),
'variant': 'bare',
'body': children
]);




2 Answers
2

Currently no.

The issue is that the body attribute for buttonMenu is of type Aura.ComponentDefRef vs the usual Aura.Component

Because of that, items passed to v.body are expected to be templates to create components vs actual components.

So you can't dynamically create the menuItem instances.

If you explain more why you want to do that, I could explain some workarounds.

After all this debugging, it appears to be a bug in the framework. Essentially, what's happening is that by the time the menu gets around to rendering the body in changeVisibility, the attribute componentDef on $A.createComponent(s) created lightning:menuItem components happens to be undefined instead of being markup://lightning:menuItem.

changeVisibility

componentDef

$A.createComponent(s)

lightning:menuItem

undefined

markup://lightning:menuItem

This ultimately causes a crash in Aura's $createComponentFromConfig$ method, as it cannot find the definition for this component. The error itself specifically happens on a line that reads something like if(config['descriptor']), which ends up crashing because config is undefined.

$createComponentFromConfig$

if(config['descriptor'])

config

Note that I did find you can query the body of an existing menu and manipulate the public attributes of those items, or even remove them from the list. If possible, create a list of as many items as you need in markup, and then use your init method to hide/shuffle/update values as you see fit. I realize it's not ideal, and hopefully this bug will get fixed, but for now, a direct solution appears to be impossible.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.