Novu•6mo 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

25 Replies

Ask Inkeep•6mo 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-PriceLabsOP•6mo ago

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

Ask Inkeep•6mo ago

Got it. Tagging @Support for additional help.

Rishabh-PriceLabsOP•6mo ago

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

Pawan Jain•6mo 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-PriceLabsOP•5mo 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•5mo ago

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

Pawan Jain•5mo 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-PriceLabsOP•5mo ago

We are using headless. Any docs for this?

Pawan Jain•5mo ago

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

Rishabh-PriceLabsOP•5mo 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•5mo ago

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

Rishabh-PriceLabsOP•5mo ago

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

Pawan Jain•5mo 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-PriceLabsOP•5mo ago

@Pawan Jain We have this issue in production and users are directly affected by this. @Pawan Jain what is the current status of this?

Pawan Jain•5mo ago

@Rishabh-PriceLabs Apologies, I could not respond to you earlier. We are rewriting our notification center with much better DX and customization options. it will ready to use before this months' last week I will keep you updated

Rishabh-PriceLabsOP•4mo ago

@Pawan Jain is everything on schedule?

Novu_Bot•4mo ago

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

Pawan Jain•4mo ago

@Rishabh-PriceLabs New notification center (Inbox) is scheduled to be released in the last days of this month. I will keep you updated

Rishabh-PriceLabsOP•4mo ago

@Pawan Jain Is this live? @Pawan Jain Can i get an update on this?

Pawan Jain•4mo ago

@Rishabh-PriceLabs Apologies for the delayed response. Its scheduled to be released on 7th of August EOD

Rishabh-PriceLabsOP•4mo ago

Is this live now? @Pawan Jain

Pawan Jain•4mo ago

@Rishabh-PriceLabs We launched the React Inbox component https://docs.novu.co/inbox/introduction @Rishabh-PriceLabs I see you are using web component. Do you plan to switch to react anytime soon? @Rishabh-PriceLabs ^

Rishabh-PriceLabsOP•4mo ago

@Pawan Jain Part of our product is implemented in React. So we are using the react component right now as well.

Pawan Jain•4mo ago

@Rishabh-PriceLabs Did you get a chance to use our new Inbox component? We are actively working on adding support for other platforms

Gaming

Programming

Accessing events for actionMenu