I've a question about our MDC Menu from the latest 14.x material components web.
What's the best way to handle anchoring of a MDC Menu to a dynamic list? So for example:
<div class="container">
<ul>
<li repeat.for...>
<button>Open Menu</button>
</li>
</ul>
<mdc-menu>
...
</mdc-menu>
So, we got an list of say 100 items, dynamically loaded in the repeat. Each item has a button for opening the menu (with some clickhandling in the Javscript). We set the MDC Menu once at the bottom of the whole list, so it don't have to render 100 times. What's the best practice to anchor it at the clicked button? We're now trying to position it absolute based on event targets, but that's not working very well. Anyone with the good direction? It should be possible to anchor it instead of calculating positions on our own?
Current Javascript of the clickhandler:
openMenu($event) {
this.menu.open = true;
const boundingRect = this.container.getBoundingClientRect();
this.menu.setAbsolutePosition(...);
}
