Skip to main content

resolver

Description​

Optional. Enables the multi-area mode and defines whether an element needs a menu

Usage​

resolver?: (item: any, event: MouseEvent) => any;

Parameters​

The resolver function receives two arguments:

  • item — the value of the data-context-id attribute (or any custom identifier associated with the clicked element).
  • event — the native MouseEvent that triggered the menu.

The function should return:

  • false or null → no menu will be shown.
  • true → the menu will be shown with the item’s raw identifier.
  • any object → the returned value will be passed as the context in the menu’s onclick event.

Example​

<script>
  // the id inside the resolver is the value of the "data-context-id" attribute
  function getItem(id){
        return items.find(a => a.id == id);
    }
</script>

<ContextMenu {options} resolver={getItem}>
    {#each items as item(item.id)}
        <div data-context-id={item.id} class="item">{item.type} {item.id}</div>
    {/each}
</ContextMenu>

Details​

Check the examples of valid resolvers below:

const allowAll = (id, ev) => true;
const allowElementsWithCorrectAttribute = (id, ev) => return id;
const allowAndReturnTaskObject = (id, ev) => return tasks[id];

Related article: Using ContextMenu for multiple targets

Related sample: ContextData