[Badge] Fix transition flicker (#21557)

mui · Jun 25, 2020 · 57322a9 · 57322a9
1 parent 40ddb2f
commit 57322a9
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -151,35 +151,61 @@ export const styles = (theme) => ({
   },
 });
 
+const usePreviousProps = (value) => {
+  const ref = React.useRef({});
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
 const Badge = React.forwardRef(function Badge(props, ref) {
   const {
-    anchorOrigin = {
+    anchorOrigin: anchorOriginProp = {
       vertical: 'top',
       horizontal: 'right',
     },
-    badgeContent,
+    badgeContent: badgeContentProp,
     children,
     classes,
     className,
-    color = 'default',
+    color: colorProp = 'default',
     component: ComponentProp = 'span',
     invisible: invisibleProp,
-    max = 99,
-    overlap = 'rectangle',
+    max: maxProp = 99,
+    overlap: overlapProp = 'rectangle',
     showZero = false,
-    variant = 'standard',
+    variant: variantProp = 'standard',
     ...other
   } = props;
 
+  const prevProps = usePreviousProps({
+    anchorOrigin: anchorOriginProp,
+    badgeContent: badgeContentProp,
+    color: colorProp,
+    max: maxProp,
+    overlap: overlapProp,
+    variant: variantProp,
+  });
+
   let invisible = invisibleProp;
 
   if (
     invisibleProp == null &&
-    ((badgeContent === 0 && !showZero) || (badgeContent == null && variant !== 'dot'))
+    ((badgeContentProp === 0 && !showZero) || (badgeContentProp == null && variantProp !== 'dot'))
   ) {
     invisible = true;
   }
 
+  const {
+    anchorOrigin = anchorOriginProp,
+    badgeContent,
+    color = colorProp,
+    max = maxProp,
+    overlap = overlapProp,
+    variant = variantProp,
+  } = invisible ? prevProps : props;
+
   let displayValue = '';
 
   if (variant !== 'dot') {
@@ -192,7 +218,6 @@ const Badge = React.forwardRef(function Badge(props, ref) {
       <span
         className={clsx(
           classes.badge,
-          classes[`${anchorOrigin.horizontal}${capitalize(anchorOrigin.vertical)}}`],
           classes[
             `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(
               anchorOrigin.horizontal,

diff --git a/packages/material-ui/src/Badge/Badge.test.js b/packages/material-ui/src/Badge/Badge.test.js
@@ -170,4 +170,24 @@ describe('<Badge />', () => {
       expect(findBadge(container)).to.have.text('50');
     });
   });
+
+  it('retains anchorOrigin, content, color, max, overlap and variant when invisible is true for consistent disappearing transition', () => {
+    const wrapper = render(<Badge {...defaultProps} color="secondary" variant="dot" />);
+
+    wrapper.setProps({
+      badgeContent: 0,
+      color: 'primary',
+      variant: 'standard',
+      overlap: 'circle',
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left',
+      },
+    });
+
+    expect(findBadge(wrapper.container)).to.have.text('');
+    expect(findBadge(wrapper.container)).to.have.class(classes.colorSecondary);
+    expect(findBadge(wrapper.container)).to.have.class(classes.dot);
+    expect(findBadge(wrapper.container)).to.have.class(classes.anchorOriginTopRightRectangle);
+  });
 });