CdsAlert retains incorrect status upon re-rendering

[astorije-vmware]

Describe the bug

When conditionally rendering alerts, if one of them has the status set for CdsAlert and another alert (without status) gets rendered in its place, the first status is incorrectly kept. This is better demonstrated in the sandbox below.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/cds-alert-sticky-status-obs0dg
2. Observe the info alert group with a loading alert
3. Click on the button to toggle alert group status
4. Even though the danger alert does not have a status, it keeps the status from the previous alert

Expected behavior

The danger alert should have no progress circle indicator.

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Framework:

• [ ] Angular
• [x] React
• [ ] Vue
• [ ] Other:

Framework version:

React 18

[ashleyryan]

Yeah so React is attempting to re-use the alert group instead of unmounting and mounting a new one. We have logic that runs the sync state when the slot changes - so when alerts are added or removed, but unfortunately not when properties on alerts change, which is what react is doing. I tried adding a listener for prop changes on the alerts, but that caused an infinite loop.

You can work around this by setting a key on the alerts or on the alert groups, that will tell react to destroy the element and create a new one:

https://codesandbox.io/s/cds-alert-sticky-status-forked-e376zl?file=/src/App.tsx

[astorije-vmware]

Yeah, we're using that workaround in a few places IIRC, but the current behavior makes things easily subject to errors that are tough to detect (especially because they can be unpredictable based on the rest of the component tree). Our React developers will definitely run into this and might not always notice it :/