[material-ui][Select] The dropdown changes its position randomly sometime

[sudhanshutech]

Steps to reproduce

Link to live example: (required)

Steps: 1. 2. 3.

Current behavior

Sometimes the select changes its position while selecting some option in our filter component .

import {
  ClickAwayListener,
  IconButton,
  MenuItem,
  Paper,
  Popper,
  Select,
  Tooltip
} from "@mui/material";
import InputLabel from "@mui/material/InputLabel";
import { animated, useSpring } from "@react-spring/web";
import React, { useState } from "react";
import FilterIcon from "../assets/icons/general/filter";
import { SaveButton } from "../assets/styles/users/styles";
import CustomRangePickerContent from "../components/events/stats/custom-range-picker-content";
import theme from "../styles/themes/theme";

const Fade = React.forwardRef(function Fade(props, ref) {
  const { in: open, children, onEnter, onExited, ...other } = props;
  const style = useSpring({
    from: { opacity: 0, transform: "translateY(-20px)" },
    to: {
      opacity: open ? 1 : 0,
      transform: open ? "translateY(0)" : "translateY(-20px)"
    },
    onStart: () => {
      if (open && onEnter) {
        onEnter();
      }
    },
    onRest: () => {
      if (!open && onExited) {
        onExited();
      }
    }
  });
  return (
    <animated.div ref={ref} style={style} {...other}>
      {children}
    </animated.div>
  );
});

Fade.propTypes = {
  children: PropTypes.element,
  in: PropTypes.bool,
  onEnter: PropTypes.func,
  onExited: PropTypes.func
};

const UniversalFilter = ({
  filters,
  selectedFilters,
  setSelectedFilters,
  handleApplyFilter,
  showAllOption = true,
  datePicker = false,
  datePickerMetadata,
  style
}) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [open, setOpen] = useState(false);
  const handleFilterChange = (event, columnName) => {
    const value = event.target.value;

    setSelectedFilters(filters => ({
      ...filters,
      [columnName]: value
    }));
  };

  const handleApplyOnClick = () => {
    handleClose();
    handleApplyFilter();
  };

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
    setOpen(previousOpen => !previousOpen);
    // setOpenDialog(true);
  };

  const canBeOpen = open && Boolean(anchorEl);
  const id = canBeOpen ? "transition-popper" : undefined;

  const handleClose = () => {
    // setAnchorEl(null);
    setOpen(false);
    // setOpenDialog(false);
  };

  return (
    <div>
      <Tooltip title="Filter" arrow>
        <IconButton
          onClick={handleClick}
          sx={{
            "&:hover": {
              "& svg": {
                fill: theme.palette.keppelGreen
              }
            },
            ...style
          }}
          disableRipple
        >
          <FilterIcon fill={theme.palette.charcoal} />
        </IconButton>
      </Tooltip>
      <Popper
        //
        id={id}
        open={open}
        anchorEl={anchorEl}
        placement="bottom-end"
        modifiers={{
          flip: {
            enabled: false
          },
          preventOverflow: {
            enabled: true,
            boundariesElement: "scrollParent"
          }
        }}
        transition
      >
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={400}>
            <ClickAwayListener
              onClickAway={handleClose}
              mouseEvent="onMouseDown"
              touchEvent="onTouchStart"
            >
              <div>
                <Paper
                  sx={{
                    padding: "1rem",
                    paddingTop: "1.8rem",
                    boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.2)",
                    backgroundColor: theme.palette.solitude
                  }}
                  // style={slidingPopperStyle}
                  // className={open ? "open" : ""}
                >
                  {Object.keys(filters).map(filter_column => {
                    const options = filters[filter_column].options;
                    return (
                      <div key={filter_column} role="presentation">
                        <InputLabel id={filters[filter_column].name}>
                          {filters[filter_column].name}
                        </InputLabel>
                        <Select
                          MenuProps={{variant:'menu'}}
                          defaultValue="All"
                          key={filter_column}
                          value={selectedFilters[filter_column]}
                          onChange={e => handleFilterChange(e, filter_column)}
                          style={{
                            width: "15rem",
                            marginBottom: "1rem"
                          }}
                          inputProps={{ "aria-label": "Without label" }}
                          displayEmpty
                        >
                          {showAllOption && <MenuItem value="All">All</MenuItem>}
                          {options.map(option => {
                            return (
                              <MenuItem key={option.value} value={option.value}>
                                {option.label}
                              </MenuItem>
                            );
                          })}
                        </Select>
                      </div>
                    );
                  })}
                  {datePicker && (
                    <>
                      <CustomRangePickerContent
                        startDate={datePickerMetadata.selectedDateFilter.startDate}
                        endDate={datePickerMetadata.selectedDateFilter.endDate}
                        updateDateRange={datePickerMetadata.setSelectedDateFilter}
                        inModal={false}
                      />
                    </>
                  )}
                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
                    <SaveButton variant="contained" onClick={handleApplyOnClick}>
                      Apply
                    </SaveButton>
                  </div>
                </Paper>
              </div>
            </ClickAwayListener>
          </Fade>
        )}
      </Popper>
    </div>
  );
};

export default UniversalFilter;

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
    System:
    OS: Windows 11 10.0.22621
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.3 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (121.0.2277.112)
  npmPackages:
    @emotion/react: ^11.8.2 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.30 
    @mui/core-downloads-tracker:  5.15.3 
    @mui/icons-material: ^5.15.7 => 5.15.7 
    @mui/material: ^5.14.2 => 5.15.3 
    @mui/private-theming:  5.15.3 
    @mui/styled-engine:  5.15.3 
    @mui/styles: ^5.15.2 => 5.15.3 
    @mui/system:  5.15.3 
    @mui/types:  7.2.12 
    @mui/utils:  5.15.3 
    @mui/x-date-pickers: ^6.0.3 => 6.18.6 
    @types/react:  18.2.46 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: ^5.3.5 => 5.3.11
    typescript:  5.3.3

Search keywords: select, position,

[sudhanshutech]

I experienced this issue from modifiers prop

[DiegoAndai]

Hey @sudhanshutech, thanks for the report! Could you provide a minimal reproduction? This would help a lot. It isn't easy to debug right now, as I can't run the code snippet you provided. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.