Open yzhang-eightfold opened 2 years ago
This issue has been fixed in https://github.com/mui/material-ui/pull/32321.
For your information, here are Codesandboxes before and after.
As far as I know, this is not a bug, it's a support question. The reproduction provided for the issue https://codesandbox.io/s/customizedslider-demo-material-ui-forked-vh93v2?file=/demo.tsx raise what is going wrong:
The ref should be forwarded:
interface AirbnbThumbComponentProps extends React.HTMLAttributes<unknown> {}
-function AirbnbThumbComponent(props: AirbnbThumbComponentProps) {
- const { children, ...other } = props;
- return (
- <SliderThumb {...other}>
- {children}
- <span className="airbnb-bar" />
- <span className="airbnb-bar" />
- <span className="airbnb-bar" />
- </SliderThumb>
- );
-}
+const AirbnbThumbComponent = React.forwardRef(
+ (props: AirbnbThumbComponentProps, ref) => {
+ const { children, ...other } = props;
+ return (
+ <SliderThumb {...other} ref={ref}>
+ {children}
+ <span className="airbnb-bar" />
+ <span className="airbnb-bar" />
+ <span className="airbnb-bar" />
+ </SliderThumb>
+ );
+ }
+);
export default function CustomizedSlider() {
return (
once the change is done, it now works correctly: https://codesandbox.io/s/customizedslider-demo-material-ui-forked-yn4d9n?file=/demo.tsx:1276-1296.
I have reverted #32321 in b786ec4fca02cd7deec485277fb07ceb9b58f2c5 as https://github.com/mui/material-ui/pull/32321#issuecomment-1180402551 has no feedback after a week.
Regarding the next step, I think that we have two possible opportunities to better solve the root problem:
Or, and this is what I think makes more sense, we move more incrementally. We update the demos in the docs (https://mui.com/material-ui/react-slider/#customization) to forward the ref, so that others won't face the same problem. It would feel more composable.
+1 for doing this.
Duplicates
Latest version
Current behavior šÆ
When overriding ValueLabel in Slider props with a custom tooltip like this
we observed following behavior
Expected behavior š¤
We should not have to click on the thumb to make tooltip work
Steps to reproduce š¹
Steps:
components
propContext š¦
No response
Your environment š
`npx @mui/envinfo`
``` "@mui/material": "^5.1.0" Microsoft Edge browser ```