RE: Executing custom JavaScript functions in Clay dropdown component

2019-05-21T18:53:48Z

I am able to trigger my JavaScript by replacing Clay taglib with the liferay-ui taglib. In this case I can access/alter the generated markup without problems.
https://dev.liferay.com/en/develop/tutorials/-/knowledge_base/7-1/liferay-ui-icon-menus
As the liferay-ui is AUI based, I'd still rather find more future-ready solution.

Executing custom JavaScript functions in Clay dropdown component

2019-05-21T16:49:19Z

By default, all dropdown menu items for <clay:dropdown-actions> are pointing to specific URLs.
https://dev.liferay.com/en/develop/tutorials/-/knowledge_base/7-1/clay-dropdown-menus-and-action-menus
I'd like to execute custom JavaScript methods instead.

I've done some experiments, but I am stuck now.
In my DropdownDisplayContext I've tried to specify javascript:void(0) as the href, but this value is rejected during rendering the component.
So I am using a dummy value hoping I'll be able to tweak it afterwards by JavaScript:

dropdownItem -&gt; {
&nbsp;&nbsp;&nbsp; dropdownItem.setHref("#");
&nbsp;&nbsp;&nbsp; dropdownItem.setLabel("Hide Group");
});

However, by the time of executing my JavaScript any clay component markup doesn't seem to be injected into DOM yet, so I cannot neither modify href attribute or attach event listeners to the menu items.
So tweaking clay taglib outcome afterwards sounds as a bad idea.
I'd like to avoid creating dropdown menu from scratch (expecting browser compatibility issues, responsivity challenges etc.).