[Slider] Cannot read property 'focus' of null at focusThumb

Hi, I’m getting inconsistent behavior with the slider component. I’m using a slider with a min, max, and range property. Sometimes it works, sometimes it crashes with the error:

Cannot read property 'focus' of null
    at focusThumb (node_modules/material-ui/core/Slider/Slider.js:144:98)
    at eval (node_modules/material-ui/core/Slider/Slider.js:824:5
    at eval (node_modules/material-ui/core/utils/useEventCallback.js:25:29

• 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 😯

When you click on the slider’s minium range point, an error throws. Sometimes it throws, sometimes it doesnt, depending on a developer sets up the slider component. I’ve been investigating to see why the slider throws, and which configuration makes it throw. So far, the best I’ve done, is isolate the issue to the following configuration of slider:

• Developer sets up a slider with the props min, max, value, and onChange
• Developer changes the min property
• The component throws when a user clicks the slider’s min ticker

It seems like if you change the min prop, you must change the value prop, otherwise the error appears.

It seems like the error is due to an out range design pattern. Perhaps your source code keeps track of the the range of HTML elements that represent the ticks, so when the user clicks the Min mark, that HTML element is now null, so your source code throws. Its an edge case in your design, and should be fixed.

A good fix would be, if the min prop changes, and if you’re keeping track of the discrete HTML elements that represent marks, then you must update your internal state to account for the new min, and set the state of the component to the slider’s new min mark’s element. Failing to do so, would cause a null error on click…which what we’re observing here.

Any who, thats the edge case and the fix, based on my observation. Please patch. Should be a simple fix to cover the missing edge case the component’s state.

Expected Behavior 🤔

No error

Steps to Reproduce 🕹

Codesandbox with error: Codesandbox with no error / with the isolated

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.?.?
React
Browser
TypeScript
etc.

[NawarA]

@mageprincess Rock on! 🧙‍♀️ 👸

[oliviertassinari]

@mageprincess It sounds like a solid start, do you want to open a pull request on the next branch? 😃