Merge pull request #2656 from NDLANO/fix/google-translate

fix: do not render a fragment when replacing content. Google Translata breaks React
NDLANO · Dec 13, 2024 · c3163f1 · c3163f1
2 parents d7d9fb8 + ea03210
commit c3163f1
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/packages/primitives/src/Button.tsx b/packages/primitives/src/Button.tsx
@@ -268,18 +268,24 @@ const StyledButton = styled(ark.button, {}, { baseComponent: true, defaultProps:
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
   ({ loading, loadingContent: loadingContentProp, replaceContent, onClick, children, ...props }, ref) => {
     const ariaDisabled = loading ? { "aria-disabled": true } : {};
-    const loadingContent = replaceContent ? (
-      loadingContentProp
-    ) : (
-      <>
-        {loadingContentProp}
-        {children}
-      </>
-    );
+
+    // The conditions within this component are a bit complex, but unfortunately necessary.
+    // Google Translate and React do not play well together. If we use a fragment for the loading content, React will crash.
+    // This is supposed to be the inline equivalent of:
+    //
+    //  const loadingContent = replaceContent ? (
+    //   loadingContentProp
+    //  ) : (
+    //    <>
+    //      {loadingContentProp}
+    //      {children}
+    //    </>
+    //  );
 
     return (
       <StyledButton onClick={loading ? undefined : onClick} {...ariaDisabled} {...props} ref={ref}>
-        {loading ? loadingContent : children}
+        {!!loading && loadingContentProp}
+        {(!loading || (!!loading && !replaceContent)) && children}
       </StyledButton>
     );
   },