Jump to content

Inputfields addHeaderAction with menu items firing duplicate events when mixed between callback and page view options


FireWire
 Share

Recommended Posts

I'm adding a header action with something similar to the following:

Inputfields.addHeaderAction('title', {
  label: 'Some custom actions',
  icon: 'fa-question',
  menuItems: [
    {
      label: 'Option 1',
      href: 'https://somedomain.ddev.site/admin/page-to-show/',
      modal: true,
      active: true,
      callback: null,
    },
    {
      label: 'Option 2',
      callback: function() {
        ProcessWire.alert('Shows option 2');
      },
      active: true,
    },
    {
      label: 'Option 3',
      callback: function() {
        ProcessWire.alert('Shows option 3');
      },
      active: true,
    },
  ]
});

When there is a combination of types of actions then the options that execute a callback will trigger the option that executes a href/modal. When clicking the option that opens a modal, the other options are not triggered.

Example that opens the "Logs" page in a modal. Clicking "Option 2" executes both the callback and opens the modal in "Option 1":

image.png.41b6ffce4db01226746c472b499418f2.png

The same occurs if "Option 3" is clicked.

I'm trying to figure out if this is something I'm doing wrong or if there's a bug when mixing option types.

I was able to create a workaround by adapting this code by @bernhard that uses a callback to programmatically open a modal:

Inputfields.addHeaderAction('title', {
  label: 'Some custom actions',
  icon: 'fa-question',
  menuItems: [
    {
      label: 'Option 1',
      active: true,
      callback: function() {
        const link = document.createElement("a");
        const $link = $(link);

        $link.attr('href', 'https://moduledev.ddev.site/admin/setup/logs/');
        $link.addClass('pw-modal');
        $link.on('click', pwModalOpenEvent);
        $link.on('pw-modal-closed', () => $link.remove());
        $link.click();
      },
    },
    {
      label: 'Option 2',
      callback: function() {
        ProcessWire.alert('Shows option 2');
      },
      active: true,
    },
    {
      label: 'Option 3',
      callback: function() {
        ProcessWire.alert('Shows option 3');
      },
      active: true,
    },
  ]
});

This works but doesn't use the native API.

Anyone have any insights that could help? Many thanks!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...