avoid leak

mui · Oct 24, 2019 · aa56102 · aa56102
1 parent 46f349e
commit aa56102
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md
@@ -65,7 +65,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSlider-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">marked</span> | <span class="prop-name">.MuiSlider-marked</span> | Styles applied to the root element if `marks` is provided with at least one label.
 | <span class="prop-name">vertical</span> | <span class="prop-name">.MuiSlider-vertical</span> | Pseudo-class applied to the root element if `orientation="vertical"`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root and thumb element if `disabled={true}`.
 | <span class="prop-name">rail</span> | <span class="prop-name">.MuiSlider-rail</span> | Styles applied to the rail element.
 | <span class="prop-name">track</span> | <span class="prop-name">.MuiSlider-track</span> | Styles applied to the track element.
 | <span class="prop-name">trackFalse</span> | <span class="prop-name">.MuiSlider-trackFalse</span> | Styles applied to the track element if `track={false}`.

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
@@ -145,6 +145,7 @@ export const styles = theme => ({
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
     '&$disabled': {
+      pointerEvents: 'none',
       cursor: 'default',
       color: theme.palette.grey[400],
     },
@@ -172,7 +173,7 @@ export const styles = theme => ({
   },
   /* Pseudo-class applied to the root element if `orientation="vertical"`. */
   vertical: {},
-  /* Pseudo-class applied to the root element if `disabled={true}`. */
+  /* Pseudo-class applied to the root and thumb element if `disabled={true}`. */
   disabled: {},
   /* Styles applied to the rail element. */
   rail: {
@@ -183,7 +184,7 @@ export const styles = theme => ({
     borderRadius: 1,
     backgroundColor: 'currentColor',
     opacity: 0.38,
-    '& $vertical': {
+    '$vertical &': {
       height: '100%',
       width: 2,
     },
@@ -195,7 +196,7 @@ export const styles = theme => ({
     height: 2,
     borderRadius: 1,
     backgroundColor: 'currentColor',
-    '& $vertical': {
+    '$vertical &': {
       width: 2,
     },
   },
@@ -244,8 +245,7 @@ export const styles = theme => ({
     '&$active': {
       boxShadow: `0px 0px 0px 14px ${fade(theme.palette.primary.main, 0.16)}`,
     },
-    '& $disabled': {
-      pointerEvents: 'none',
+    '&$disabled': {
       width: 8,
       height: 8,
       marginLeft: -4,
@@ -254,11 +254,11 @@ export const styles = theme => ({
         boxShadow: 'none',
       },
     },
-    '& $vertical': {
+    '$vertical &': {
       marginLeft: -5,
       marginBottom: -6,
     },
-    '& $vertical$disabled': {
+    '$vertical &$disabled': {
       marginLeft: -3,
       marginBottom: -4,
     },
@@ -303,7 +303,7 @@ export const styles = theme => ({
     top: 22,
     transform: 'translateX(-50%)',
     whiteSpace: 'nowrap',
-    '& $vertical': {
+    '$vertical &': {
       top: 'auto',
       left: 22,
       transform: 'translateY(50%)',
@@ -752,18 +752,15 @@ const Slider = React.forwardRef(function Slider(props, ref) {
             valueLabelFormat={valueLabelFormat}
             valueLabelDisplay={valueLabelDisplay}
             className={classes.valueLabel}
-            value={
-              typeof valueLabelFormat === 'function'
-                ? valueLabelFormat(value, index)
-                : valueLabelFormat
-            }
+            value={value}
             index={index}
-            open={open === index || active === index || valueLabelDisplay === 'on'}
+            open={open === index || active === index}
             disabled={disabled}
           >
             <ThumbComponent
               className={clsx(classes.thumb, classes[`thumbColor${capitalize(color)}`], {
                 [classes.active]: active === index,
+                [classes.disabled]: disabled,
                 [classes.focusVisible]: focusVisible === index,
               })}
               tabIndex={disabled ? null : 0}