fix(material): move the ref check

swordev · Sep 2, 2022 · b26b7e4 · b26b7e4
1 parent 20d2d70
commit b26b7e4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/.changeset/brown-balloons-warn.md b/.changeset/brown-balloons-warn.md
@@ -0,0 +1,5 @@
+---
+"@suid/material": patch
+---
+
+Fix console error in `ButtonBase`
diff --git a/packages/material/src/ButtonBase/ButtonBase.tsx b/packages/material/src/ButtonBase/ButtonBase.tsx
@@ -337,19 +337,6 @@ const ButtonBase = $.component(function ButtonBase({
   const enableTouchRipple = () =>
     mountedState() && !props.disableRipple && !props.disabled;
 
-  if (process.env.NODE_ENV !== "production") {
-    createEffect(() => {
-      if (enableTouchRipple() && !ripple.ref) {
-        console.error(
-          [
-            "MUI: The `component` prop provided to ButtonBase is invalid.",
-            "Please make sure the children prop is rendered in this custom component.",
-          ].join("\n")
-        );
-      }
-    });
-  }
-
   return (
     <ButtonBaseRoot
       {...buttonProps()}
@@ -377,7 +364,19 @@ const ButtonBase = $.component(function ButtonBase({
       {props.children}
       <Show when={enableTouchRipple()}>
         <TouchRipple
-          ref={ripple}
+          ref={(ref) => {
+            ripple(ref);
+            if (process.env.NODE_ENV !== "production") {
+              if (!ref) {
+                console.error(
+                  [
+                    "MUI: The `component` prop provided to ButtonBase is invalid.",
+                    "Please make sure the children prop is rendered in this custom component.",
+                  ].join("\n")
+                );
+              }
+            }
+          }}
           center={props.centerRipple}
           {...(props.TouchRippleProps || {})}
         />