Блог

по какой-то причине атрибут Menuprops у меня не работает, и я не могу изменить положение выпадающего списка. Пожалуйста, посмотрите мой код, я делаю то же самое, что обсуждалось в других связанных вопросах.

Я хочу, чтобы выпадающее меню Menuitmes отображалось чуть ниже поля ввода выбора и имело ту же ширину, что и поле ввода.

 import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import Grid from "@material-ui/core/Grid";
import { IconButton, InputAdornment, OutlinedInput } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    // padding: "10px",
    width: "100%",
  },
  formControl: {
    // minWidth: 120,
    // width: '90%',
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    "amp; .MuiSelect-select": {
      fontSize: "12px",
      textAlign: "left",
      //padding: "6px 10px",
    },
    "amp; .MuiInputBase-root": {
      height: "45px",
      borderRadius: "5px",
    },
  },
  placeholderValue: {
    color: "#9F9F9F",
  },
  selectBox: {
    flex: 1,
  },
  selectEmpty: {
    flex: 1,
    marginTop: theme.spacing(2),
    background: "#fff",
    borderRadius: "22px",
    padding: "3px",
    textAlign: "center",
    "amp;:before, amp;:after,amp; .MuiSelect-icon": {
      display: "none",
    },
    "amp; .MuiSelect-select:focus": {
      background: "transparent",
    },
  },
  Icon: {
    color: "#26a0c9",
    marginRight: 5,
  },
  inputlabel: {
    fontSize: "12px",
    fontWeight: "bold",
    lineHeight: "1.33",
    color: "#7d7d7d",
    marginBottom: "10px",
    display: "block",
  },
  isRequired: {
    color: "#ff0000",
    marginLeft: "5px",
  },
}));

export default function SelectComp(props) {
  const classes = useStyles();
  const { StartIcon } = props;

  const handleChange = (event) => {
    props.handleChange(event);
  };

  return (
    <Grid container alignItems="flex-end" className={classes.root}>
      <Grid item xs={12}>
        <label htmlFor={props.name} className={classes.inputlabel}>
          {props.label}
          {props.isRequired ? (
            <span className={classes.isRequired}>*</span>
          ) : (
            <></>
          )}
        </label>
        <FormControl
          variant="outlined"
          className={classes.formControl}
          disabled={props.isDisable ? props.isDisable : false}
        >
          <Select
            value={props.value ? props.value : ""}
            onChange={(e) => handleChange(e)}
            // displayEmpty={props.displayEmpty || true}
            className={`${
              props.module === "timeline"
                ? classes.selectEmpty
                : classes.selectBox
            } ${props.className}`}
            inputProps={{ "aria-label": props.label }}
            name={props.name}
            startAdornment={
              props.StartIcon ? (
                <InputAdornment position="start">
                  <StartIcon />
                </InputAdornment>
              ) : (
                <></>
              )
            }
            MenuProps={{
              anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
              },
              getContentAnchorEl: null
            }}
          >
            {!props.value amp;amp; (
              <MenuItem value={""} className={classes.placeholderValue}>
                {props.placeholder}
              </MenuItem>
            )}
            {props.options amp;amp;
              props.options.map((data) => {
                return (
                  <MenuItem value={data.value} key={data.value}>
                    {data.label}
                  </MenuItem>
                );
              })}
          </Select>
        </FormControl>
      </Grid>
    </Grid>
  );
}

  

После очень удачных попыток я смог выяснить проблему. Мои элементы меню были очень большими по количеству без предварительного указания свойства min height css для MenuItems material ui не сдвигал выпадающий список выбора под полем ввода.

После применения свойства min height к компоненту бумаги под выбранным входом я смог решить эту проблему.

Использование

  menuPaper: {
    maxHeight: 200
  }
  

Для любой ясности, пожалуйста, прокомментируйте и спросите

используйте variant=»standard» и выберите и MenuItem следующим образом :

  import FormControl from '@mui/material/FormControl';
    import Select from '@mui/material/Select';
    import InputLabel from '@mui/material/InputLabel';


    <FormControl variant="standard"  required className={classes.formControl}>
                        <InputLabel htmlFor="demo-simple-select-standard-label">vesselType</InputLabel>
    
                        <Select
                            defaultValue={formik.values?.vesselType}
                            value={formik.values?.vesselType}
                            // id="grouped-native-select"
                            name="vesselType"
                            onChange={formik.handleChange}
    
                            disabled={!formik.values.imoNo || !imo}
                            className="w-100"
                            labelId="demo-simple-select-standard-label"
                            id="demo-simple-select-standard"
                        >
                            <MenuItem  aria-label="None" value=""/>
                            {vesselType.map((option, i) => <MenuItem key={i}
                                                                
   value={option.value}>{option.name}</MenuItem>)}
                        </Select>
                    </FormControl>