Starting from here vaadin-item @click event in lit template I replaced the
<vaadin-dropdown-menu label="Page Size">
<template>
<vaadin-list-box>
<vaadin-item @click="${event => this.setLimit(10)}">10</vaadin-item>
<vaadin-item @click="${event => this.setLimit(25)}">25</vaadin-item>
<vaadin-item @click="${event => this.setLimit(50)}">50</vaadin-item>
<vaadin-item @click="${event => this.setLimit(100)}">100</vaadin-item>
</vaadin-list-box>
</template>
</vaadin-dropdown-menu>
with
<paper-menu-button>
<paper-icon-button icon="menu" slot="dropdown-trigger">
</paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>10</paper-item>
<paper-item>25</paper-item>
<paper-item>50</paper-item>
<paper-item>100</paper-item>
</paper-listbox>
</paper-menu-button>
The problem I'm now facing is that I'm getting animation exceptions in the javascript console when clicking on the menu icon that opens the select dropdown:
vaadin-bundle-f3342f1907b875298b7b.cache.js:7198 Couldnt play ( fade-in-animation ). TypeError: document.timeline.play is not a function at HTMLElement._configureAnimations (vaadin-bundle-f3342f1907b875298b7b.cache.js:7198) at HTMLElement.playAnimation (vaadin-bundle-f3342f1907b875298b7b.cache.js:7198) at HTMLElement._renderOpened (vaadin-bundle-f3342f1907b875298b7b.cache.js:7228) at HTMLElement.__openedChanged (vaadin-bundle-f3342f1907b875298b7b.cache.js:7198) at HTMLElement. (vaadin-bundle-f3342f1907b875298b7b.cache.js:7198)
Unsure on what can be done to fix this.