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
  const resolver = id => id;
    let menu = $state();
</script>

<!--a menu will appear for all items with the "data-context-id" attribute -->
<ActionMenu {options} {resolver} bind:this={menu} />

{#each items as item(item.id)}
    <div class="item" onclick={menu.show} data-context-id={item.id}></div>
{/each}

Details​

The result of the resolver call will be provided in the resulting click event.

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 Action Menu for multiple targets

Related sample: