[material-ui][Badge] Fix stale values being used when badge is invisible #43083
Conversation
DiegoAndai
added
component: badge
Netlify deploy previewhttps://deploy-preview-43083--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
| @@ -134,7 +134,7 @@ describe('<Badge />', () => { | |||
| it('should render with invisible class when invisible and showZero are set to false and content is 0', () => { | |||
| const { container } = render(<Badge badgeContent={0} showZero={false} invisible={false} />); | |||
| expect(findBadge(container)).to.have.class(classes.invisible); | |||
| expect(findBadge(container)).to.have.text(''); | |||
| expect(findBadge(container)).to.have.text('0'); | |||
There was a problem hiding this comment.
This reverts the fix introduced in #21557. This fix has added the usage of the usePreviousProps hook. You will noticed on this demo: https://next.mui.com/material-ui/react-badge/#badge-visibility, that when clicking on the "-" button, when the value is 1, it immediately disappears without adding the "0" as a content - this is a non valid state. The issue is again here on this PR deploy preview.
I would recommend when going trough history to search for the PR that did the fix, as it is usually how you can understand the motivation for the code change, e.g. #21557 has a description & explanation. Also, changing a test should be an indication that something will be broken/behavior will change. |
github-actions
bot
added
the
PR: out-of-date
Fixes: #43081
To see the error:
.MuiBadge-badgeelement.MuiBadge-badgeelement's valueBefore: https://stackblitz.com/edit/react-qkjzbj?file=Demo.tsx
After: Waiting for CI build
I think the use of
usePreviousPropsis incorrect, asbadgeContent,maxanddisplayValueshouldn't be coupled with theinvisiblevalue. They should always be updated regardless. It was originally added for another use case: mnajdova@7572c90#diff-26877d58ee4ebaa271700aae39d84f0ce250e8d01c677024bbf0d53f46159b1b, so it might've stuck around inadvertently.I fixed in both
mui-materialandmui-basefor consistency.