Novu•2w ago

Accessing events for actionMenu

Team: I want to add event listeners to the actionMenu buttons. When I click on the Remove message / Mark as read buttons, it closes the notification overlay. I am using some other event handlers like onNotificationClick. Using the stopPropogation method would be helpful here. Is there any event handler for these actionMenu dropdown buttons? Ref: https://vimeo.com/manage/videos/966276945/b2e1dfc183?extension_recording=true

15 Replies

Ask Inkeep•2w ago

Hi @Rishabh-PriceLabs, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * How To Integrate Segment With Novu * Iframe Embed * Configuring Multiple Tabs * How to send push notifications to Flutter apps (Android & iOS) with FCM using Novu ----------------------------- Answer To handle events for actionMenu buttons in Novu, such as "Remove message" or "Mark as read", you can use event listeners similar to those you've used for onNotificationClick. While the specific event handlers for the actionMenu buttons like "Remove message" or "Mark as read" are not explicitly detailed in the provided documentation, you can generally use JavaScript event propagation methods to manage how events are handled. For instance, if you're encountering issues where clicking these buttons closes the notification overlay, using event.stopPropagation() in your event handlers can prevent the event from bubbling up to parent elements, which might be triggering the overlay to close. Here’s a generic example of how you might set up such an event listener in JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    const actionMenuButtons = document.querySelectorAll('.action-menu-button');

    actionMenuButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            event.stopPropagation();
            // Add your custom logic here
            console.log('Action menu button clicked:', event.target);
        });
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const actionMenuButtons = document.querySelectorAll('.action-menu-button');

    actionMenuButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            event.stopPropagation();
            // Add your custom logic here
            console.log('Action menu button clicked:', event.target);
        });
    });
});

Replace .action-menu-button with the actual class or ID of your actionMenu buttons. This code snippet ensures that when you click on an actionMenu button, it stops the click event from propagating to higher-level elements in the DOM, which should prevent the notification overlay from closing unexpectedly. For more tailored advice, please refer to the specific implementation details of your notification system or consult the official documentation for the library or framework you are using for your notification overlays. If Novu updates their documentation to include specific handlers for these actionMenu events, that would also be a valuable resource. Remember, the example provided is generic and might require adjustments to fit the specific setup of your application.

Rishabh-PriceLabs•2w ago

This won't work since the actionMenu only gets rendered to DOM when the ellipsis is clicked.

Ask Inkeep•2w ago

Got it. Tagging @Support for additional help.

Rishabh-PriceLabs•2w ago

We are using the react component as well, the actionMenu buttons are working fine there.

Pawan Jain•2w ago

We are using the react component as well, the actionMenu buttons are working fine there.

@Rishabh-PriceLabs
Does it mean that it is working in react but not in iframe?

Rishabh-PriceLabs•2w ago

@Pawan Jain It is working in React but not in the headless component. @Pawan Jain Can you please help resolve this ASAP? We are having this issue in production.

Novu_Bot•2w ago

@Rishabh-PriceLabs, you just advanced to level 1!

Pawan Jain•2w ago

@Rishabh-PriceLabs Sorry for missing this. for headless library, user has to build UI themselves just want to double check if it is headless or iframe?

Rishabh-PriceLabs•2w ago

We are using headless. Any docs for this?

Pawan Jain•2w ago

@Rishabh-PriceLabs Are you looking for this doc? https://docs.novu.co/notification-center/client/headless/get-started

Rishabh-PriceLabs•2w ago

@Pawan Jain I connected with the team and it might have been the wrong choice of words. We are using https://docs.novu.co/quickstarts/vanillajs#using-novu-in-a-vanilla-js-app. Will that make any difference? @Pawan Jain

Pawan Jain•2w ago

@Rishabh-PriceLabs I can reproduce this issue in web component. Are you looking to have popover opened when action items are clicked?

Rishabh-PriceLabs•5d ago

@Pawan Jain Yes, correct. We want the same behavior as present in the React component. @Pawan Jain any updates on this?

Pawan Jain•4d ago

Hey @Rishabh-PriceLabs Just want to check if this issue is a blocker for you. Can we prioritize a bit later if it is not a blocker?

Rishabh-PriceLabs•4d ago

@Pawan Jain We have this issue in production and users are directly affected by this.

Gaming

Programming

Accessing events for actionMenu