Three dots menu is not working properly when notification moves between tabs

[RuslanHryn]

For example, we have two tabs for read and unread notifications

 const stores = [
    { id: 'default', defaultQueryParams: { read: false } },
    { id: 'read', defaultQueryParams: { read: true } },
  ];

  const tabs = [
    { storeId: 'default', label: 'read' },
    { storeId: 'read', label: 'unread' },
  ];

<MagicBell
        apiKey=
        userExternalId=
        ...
        stores={stores}
       />}
      >
        {(props): React.JSX.Element => (
          <FloatingNotificationInbox
            tabs={tabs}
            closeOnNotificationClick={false}
            notificationPreferencesEnabled={false}
            placement="bottom-start"
            height={500}
            {...props}
          />
        )}
      </MagicBell>

The three dots menu on the notification from unread tab can not be opened. The notification will be moved to read tab on the click on the dots menu instead of opening dots menu

[smeijer]

Hi Ruslan,

Can you please share a reproduction? The tabs and dots menu seem to be working in our playground: https://playground.magicbell.com/react-inbox-tabs.

[RuslanHryn]

@smeijer you can't reproduce this issue because the playground is using an old version of "@magicbell/magicbell-react": "10.7.5"
Please use latest version which is 11.2.1 to reproduce this issue.

I could not prepare reproducer based on your playground because it is not compatible with latest version of magicbell-react

Instead I've attached simple app to reproduce this issue

reproducer.zip

[smeijer]

Thanks. I've confirmed the issue. The issue applies to tabs that are filtered on read: false. Clicking the notification anywhere, and that currently includes the dots menu, causes the notification to be marked as read, and thus causing it to move away from that tab as it no longer matches the filter.

I have a fix ready that I'll merge and publish later this week. Please keep track of it here: magicbell/magicbell-js#468