Unable to close notification since on release v4.5.0

[donegjookim]

Our component library has been using rc-notification, and closing the notification started to not work since release v4.5.0. To be more specific, removeNotice method gets called, and I see that the notices array in the React state of rc-notification module removes the correct item. However, the state change does not get reflected in the UI, and the notification does not disappear from the screen.

Expected behavior:

• Invoking "removeNotice" method with valid key correctly removes the notification from the UI

Current behavior:

• Clicking on the close icon that calls "removeNotice" method removes the notice in the state correctly, but the notification does not disappear from the UI

[dizefurkan]

+1

Here is reproduce: https://codesandbox.io/s/condescending-buck-0ygl1?file=/src/App.tsx

If you upgrade the rc-notification package version, you will see notification not closing automatically.

I downgrade the package version to 4.4.0 and solved for me

[Brooooooklyn]

+1, seems like introduced on https://github.com/react-component/notification/commit/01c43b0d56f023845d7c57fa4054e5aab9f6e9b5 @zombieJ

[Brooooooklyn]

@afc163 Is this project still alive? Pin the rc-notification causes a duplicate packages issue since [email protected] -> [email protected] -> [email protected] and the other rc-xxx dependents [email protected]

[khanakia]

same issue i cannot close the button using Close Button

[rammaks]

Same problem here, even the simplest Demo from https://notification-react-component.vercel.app/demo/hooks doesn't work for me - notifications don't disappear. Using React 17.0.2 + rs-notifications 4.5.7.

[flycj]

I found that after using removeNotice(key), the *-fade-leave class will be added to the corresponding div, and you can use *-fade-leave to control the display/hide of the notification content through css, which can solve the problem. We need to understand that the removeNotice method does not remove the notification html from the dom tree.