[material-ui][Badge] When `showZero={false}` and value is `0` content is not updated

[wg-xb]

Steps to reproduce

Link to live example: (required)
Demo in Stackblitz : https://stackblitz.com/edit/react-qkjzbj?file=Demo.tsx
Steps:

1. Inspect .MuiBadge-badge elements in dev tools
2. Click "Set to 0" and observe

Current behavior

• For Badge with showZero={false} content of .MuiBadge-badge element will not be updated (will still be 8, depite of element being not visible)
• For Badge with showZero={true} content of .MuiBadge-badge element will be updated

Expected behavior

I believe this is wrong and content should updated to current value, even if element is not visible

Context

I am using Badge component and while testing if it visually hidden and has zero value when value is changed from anything other than 0 tests are failing because element is hidden but old value is present in the DOM.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: MuiBadge

[DiegoAndai]

Hey @wg-xb, thanks for the report!

This is indeed a bug. I opened a PR to fix it.

Sadly, I don't think we will be able to release this on v5 (the current version), but it will be available in v6, which is now in beta and will be stable in the upcoming weeks. Is that a deal breaker for you?

[wg-xb]

@DiegoAndai Thanks for quick reaction.
It is not a deal breaker as whole project relies on MUI anyway, but the sooner it is fixed the better. It is probably an accessibility issue as content is read by screen readers even if it is visually hidden.