Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Skeleton provides error in <p> tags

See original GitHub issue

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Got an error in the logs

Expected Behavior 🤔

No error logs

Steps to Reproduce 🕹

Put a Skeleton in a ListItemText secondary prop. Than i got error logs in develop mode. It’s because a <div> in a <p> (Secondary Typography) is invalid

Your Environment 🌎

Tech	Version
Material-UI	v4.8.3
React	v16.11.0
Material-UI/lab	4.0.0-alpha.39

Solution

I think a skeletion variant=text should be <span> instead of a <div>.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

ximexcommented, Jan 13, 2020

yes the rendering is display: block. but the semantic of the html would be more correct if we use a div for block things and span for text

1reaction

ximexcommented, Jan 13, 2020

or this way?

diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js
index c4696edc7..56b0ecf51 100644
--- a/packages/material-ui-lab/src/Skeleton/Skeleton.js
+++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js
@@ -74,7 +74,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) {
     animation = 'pulse',
     classes,
     className,
-    component: Component = 'div',
+    component: Component = props.variant === 'text' ? 'span' : 'div',
     height,
     variant = 'text',
     width,

a div makes sense for rect and circle