The isOpen of FloatingNotificationInbox does not work as expected

[EtienneBBlache]

I use a custom NotificationItem so I have to handle my redirection with the actionUrl.
I want the window to close after I click on the notification.
So I manage my own isPanelOpen from a context in the Notification component as well as with the onToggle of the MagicBell component:

The problem is that after I change the value to false from the click on my Notification, the FloatingNotificationInbox won't open again from clicking the bell even if I can see that the value of isPanelOpen is changing properly.
I would expect the FloatingNotificationInbox to respect the isOpen value at any time.

[smeijer]

Hi @EtienneBBlache , can you please upgrade to @magicbell/[email protected], and move the isOpen prop from the FloatingNotifcationInbox component to the MagicBell component? I've just published a fix that should correct this, but the isOpen prop needs to be on the provider, as the children of that component aren't rendered when isOpen is false. You can also remove the toggle property from the FloatingNotifcationInbox as the MagicBell provider overrides it.

FYI: here's the changelog with an example showing how to control the state: https://github.com/magicbell-io/magicbell-js/blob/main/packages/react/CHANGELOG.md#1093

Copy from that changelog:

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);
  const toggle = () => setIsOpen((open) => !open);

  return (
    <>
      <button type="button" onClick={open}>open</button>
      <button type="button" onClick={close}>close</button>
      <button type="button" onClick={toggle}>toggle</button>

      <MagicBell apiKey="__API_KEY__" userEmail="__USER_EMAIL__" onToggle={toggle} isOpen={isOpen}>
        {(props) => <FloatingNotificationInbox height={450} {...props} />}
      </MagicBell>
    </>
  );
}

I hope this helps.

[EtienneBBlache]

Awesome! Thanks for the quick fix!