Slider inside of Modal is not working - React + Material UI

Question

I am trying to attach a custom slider component in an MUI Modal component.

My slider is working pretty good on a storybook, this is the behavior as expected:

But when I add it into the Material UI modal it this is the behavior:

I really don't know what could be happening... I've tried making my custom modal (without MUI), using another slider library and they all behave the same.

I am getting this warning when I try to move my slider on the modal:

Slider.js:770 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 
Consider marking the event handler as 'passive' to make the page more responsive. 
See https://www.chromestatus.com/feature/5745543795965952

This is my slider code (which, to make emphasis, is working perfectly outside of the modal:

import React from "react";
import {
  styled,
  Grid,
  Slider as MUISlider,
  InputBase,
  Tooltip,
} from "@material-ui/core";

const CustomSlider = styled(MUISlider)(({ theme }) => ({
  color: theme.palette.secondary.light,
  width: 86,
}));

const GasInput = styled(InputBase)(({ theme }) => ({
  color: theme.palette.secondary.light,
  width: 48,
  height: 32,
  border: "1px solid #ECEFF3",
  borderRadius: 4,
  background: "#FAFCFF",
  fontSize: 12,
  boxSizing: "border-box",
  padding: 12,
}));

const SliderContainer = styled(Grid)({
  width: 200,
  height: 20,
  marginTop: -10,
});

const Input = styled(Grid)({
  paddingLeft: 8,
});

export interface SliderProps {
  value: number;
  min: number;
  max: number;
  onChangeValue: (value: number) => void;
}

interface Props {
  children: React.ReactElement;
  open: boolean;
  value: number;
}

function ValueLabelComponent(props: Props) {
  const { children, open, value } = props;

  return (
    
      {children}
    
  );
}

export function Slider({ min, max, value, onChangeValue }: SliderProps) {
  const handleSliderChange = (
    _: React.ChangeEvent,
    value: number | number[]
  ) => {
    onChangeValue(Number(value));
  };

  const handleInputChange = (event: React.ChangeEvent) => {
    onChangeValue(parseInt(event.target.value, 10));
  };

  return (
    
      
        
      
      
        
      
    
  );
}

user_6828706 · Answer

I created an example using your code. Everything appears to work as expected. Compare your local code to that.

user_6865687 · Answer

Thanks to @jack.benson answer, I was able to find out what was really going on (Really appreciated sir).

I created a modal component which abstracted the main things of the modal I will use through the entire app:

import React from "react";
import { Modal as MUIModal, Box, styled } from "@material-ui/core";

interface ModalProps {
  width: number;
  height: number;
  children: React.ReactNode;
  open: boolean;
}

export function Modal({ width, height, children, open }: ModalProps) {
  const ModalContainer = styled(MUIModal)({
    height,
    width,
    margin: "auto",
    borderRadius: 12,
  });

  const ModalBox = styled(Box)({
    height,
    width,
    background: "#FFFFFF",
    borderRadius: 12,
    outline: "none",
  });

  return (
    
      {children}
    
  );
}

As you can see, I am using the styled function in order to style my components. And that's what was giving me the problem. I don't know why is the reason, but if I move from styled to makeStyles it will work perfectly, this is the new code of my modal component:

import React from "react";
import { Modal as MUIModal, Box, makeStyles } from "@material-ui/core";

interface ModalProps {
  width: number;
  height: number;
  children: React.ReactNode;
  open: boolean;
}

const useStyles = ({ height, width }: Partial) => makeStyles({
  root: {
    height: `${height}px`,
    width: `${width}px`,
    margin: "auto",
    borderRadius: 12,
  },
  box: {
    height: `${height}px`,
    width: `${width}px`,
    background: "#FFFFFF",
    borderRadius: 12,
    outline: 0,
  }
});

export function Modal({ width, height, children, open }: ModalProps) {
  const classes = useStyles({ width, height })()
  return (
    
      {children}
    
  );
}

Slider inside of Modal is not working - React + Material UI

2 Answers