Menu doesn't show on items when using Appv2 & ContextMenu due to css

[yjeroen]

appv2-contextmenu.webm

The CSS doesn't take into account that ContextMenu appends a <nav>.

Just disabling overflow: hidden is not a complete solution, as it then creates a div scrollbar. Expected behavior is that the context menu floats above the whole actorsheet.

[yjeroen]

Ok bit further with debugging.

I think for boilerplate, it needs guidance that you'd need to set ContextMnu on li.item

.boilerplate .items-list needs overflow-y: visible instead of auto. And likely also height: 100%; so items get the "expand-down" class more often than "expand-up". (ideally the whole list would be as tall as the sheet)

[yjeroen]

Adding a ContextMenu will need to be in _attachFrameListeners instead of _onRender

  /**
   * Attach event listeners to the Application frame.
   * @protected
   */
  _attachFrameListeners() {
    super._attachFrameListeners();

    // Adding context menu to items
    new ContextMenu(this.element, 'li.item', [
      {
        name: "SIDEBAR.Edit",
        icon: '<i class="fas fa-edit"></i>',
        callback: this.itemEditCallback.bind(this),
        condition: li => {
          // @param {Jquery} li - The element the ContextMenu was attached to
          const dataItemId = li.data("itemId"); // you can use this in case you want to verify something of the item
          return this.isEditable; // only shows this menu option if the charactersheet is editable by the user
        }

      }
    ]);

  }

  /**
   * The Edit button in the ContextMenu was clicked on
   * @param {Jquery} li - The element the ContextMenu was attached to
   */
  itemEditCallback(li) {
    // do something
    console.log('itemEditCallback', li);
  }