[lab][LoadingButton] Apply wrapping element to prevent React crash on…

… Google page translation (mui#35198) Co-authored-by: Aarón García Hervás <[email protected]>
sai6855 · Jun 14, 2024 · b51fd5d · b51fd5d
1 parent d32a8ce
commit b51fd5d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 29 deletions.
diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/docs/data/material/components/buttons/LoadingButtonsTransition.js
@@ -34,7 +34,7 @@ export default function LoadingButtonsTransition() {
           variant="outlined"
           disabled
         >
-          <span>disabled</span>
+          Disabled
         </LoadingButton>
         <LoadingButton
           size="small"
@@ -43,7 +43,7 @@ export default function LoadingButtonsTransition() {
           loadingIndicator="Loading…"
           variant="outlined"
         >
-          <span>Fetch data</span>
+          Fetch data
         </LoadingButton>
         <LoadingButton
           size="small"
@@ -53,7 +53,7 @@ export default function LoadingButtonsTransition() {
           loadingPosition="end"
           variant="contained"
         >
-          <span>Send</span>
+          Send
         </LoadingButton>
         <LoadingButton
           size="small"
@@ -64,7 +64,7 @@ export default function LoadingButtonsTransition() {
           startIcon={<SaveIcon />}
           variant="contained"
         >
-          <span>Save</span>
+          Save
         </LoadingButton>
       </Box>
       <Box sx={{ '& > button': { m: 1 } }}>
@@ -74,15 +74,15 @@ export default function LoadingButtonsTransition() {
           variant="outlined"
           disabled
         >
-          <span>disabled</span>
+          Disabled
         </LoadingButton>
         <LoadingButton
           onClick={handleClick}
           loading={loading}
           loadingIndicator="Loading…"
           variant="outlined"
         >
-          <span>Fetch data</span>
+          Fetch data
         </LoadingButton>
         <LoadingButton
           onClick={handleClick}
@@ -91,7 +91,7 @@ export default function LoadingButtonsTransition() {
           loadingPosition="end"
           variant="contained"
         >
-          <span>Send</span>
+          Send
         </LoadingButton>
         <LoadingButton
           color="secondary"
@@ -101,7 +101,7 @@ export default function LoadingButtonsTransition() {
           startIcon={<SaveIcon />}
           variant="contained"
         >
-          <span>Save</span>
+          Save
         </LoadingButton>
       </Box>
     </div>

diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx b/docs/data/material/components/buttons/LoadingButtonsTransition.tsx
@@ -34,7 +34,7 @@ export default function LoadingButtonsTransition() {
           variant="outlined"
           disabled
         >
-          <span>disabled</span>
+          Disabled
         </LoadingButton>
         <LoadingButton
           size="small"
@@ -43,7 +43,7 @@ export default function LoadingButtonsTransition() {
           loadingIndicator="Loading…"
           variant="outlined"
         >
-          <span>Fetch data</span>
+          Fetch data
         </LoadingButton>
         <LoadingButton
           size="small"
@@ -53,7 +53,7 @@ export default function LoadingButtonsTransition() {
           loadingPosition="end"
           variant="contained"
         >
-          <span>Send</span>
+          Send
         </LoadingButton>
         <LoadingButton
           size="small"
@@ -64,7 +64,7 @@ export default function LoadingButtonsTransition() {
           startIcon={<SaveIcon />}
           variant="contained"
         >
-          <span>Save</span>
+          Save
         </LoadingButton>
       </Box>
       <Box sx={{ '& > button': { m: 1 } }}>
@@ -74,15 +74,15 @@ export default function LoadingButtonsTransition() {
           variant="outlined"
           disabled
         >
-          <span>disabled</span>
+          Disabled
         </LoadingButton>
         <LoadingButton
           onClick={handleClick}
           loading={loading}
           loadingIndicator="Loading…"
           variant="outlined"
         >
-          <span>Fetch data</span>
+          Fetch data
         </LoadingButton>
         <LoadingButton
           onClick={handleClick}
@@ -91,7 +91,7 @@ export default function LoadingButtonsTransition() {
           loadingPosition="end"
           variant="contained"
         >
-          <span>Send</span>
+          Send
         </LoadingButton>
         <LoadingButton
           color="secondary"
@@ -101,7 +101,7 @@ export default function LoadingButtonsTransition() {
           startIcon={<SaveIcon />}
           variant="contained"
         >
-          <span>Save</span>
+          Save
         </LoadingButton>
       </Box>
     </div>

diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md
@@ -185,14 +185,3 @@ This has the advantage of supporting any element, for instance, a link `<a>` ele
 Toggle the loading switch to see the transition between the different states.
 
 {{"demo": "LoadingButtonsTransition.js"}}
-
-:::warning
-There is a [known issue](https://github.com/mui/material-ui/issues/27853) with translating a page using Chrome tools when a Loading Button is present.
-After the page is translated, the application crashes when the loading state of a Button changes.
-To prevent this, ensure that the contents of the Loading Button are nested inside any HTML element, such as a `<span>`:
-
-```jsx
-<LoadingButton loading variant="outlined">
-  <span>Submit</span>
-</LoadingButton>
-```
diff --git a/docs/data/material/migration/migration-v5/migration-v5.md b/docs/data/material/migration/migration-v5/migration-v5.md
@@ -117,3 +117,9 @@ Both of these changes might slightly affect your layout.
 Note that the items' position doesn't change.
 We recommend adopting this new behavior and **not trying to replicate the old one**, as this is a more predictable and modern approach.
 :::
+
+### LoadingButton
+
+#### Contents wrapped in a <span>
+
+The `children` passed to the LoadingButton component is now wrapped in a `<span>` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites.
diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js
@@ -242,8 +242,17 @@ const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
       classes={classes}
       ownerState={ownerState}
     >
-      {ownerState.loadingPosition === 'end' ? children : loadingButtonLoadingIndicator}
-      {ownerState.loadingPosition === 'end' ? loadingButtonLoadingIndicator : children}
+      {ownerState.loadingPosition === 'end' ? (
+        <span>{children}</span>
+      ) : (
+        loadingButtonLoadingIndicator
+      )}
+
+      {ownerState.loadingPosition === 'end' ? (
+        loadingButtonLoadingIndicator
+      ) : (
+        <span>{children}</span>
+      )}
     </LoadingButtonRoot>
   );
 });