Material-UI Select customization

Question

I am trying to customize the positioning of the Select component which opens the menu as a modal by default. I need a way to make it render inline below the controlling input. I have found this library https://iulian-radu-at.github.io/react-select-material-ui/?path=/story/reactselectmaterialui--with-and-without-fullwidth-set based on Material-UI Select, though it unfortunately doesn't work for me as I have a lot of custom styling built for my component. I have seen that the ButtonGroup component can somewhat achieve this, though I would like to avoid that as an option, because of the custom styling that I have already done. I would love to hear any suggestions, I am sure I am not the only person who has this problem. Thanks!


const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.white,
    margin: theme.spacing(1),
    width: ({ inputWidth }) => (inputWidth ? inputWidth : `inherit`),
  },
}))

export const Dropdown = ({
  serviceIndex,
  label,
  fieldName,
  value,
  inputWidth,
  options,
  updateValue,
}) => {
  const classes = useStyles({ inputWidth })

  const handleChange = (event) => {
    /* logic handling updates here */
  }

  return (
    <FormControl variant="outlined" className={classes.root}>
      <Box>
        <InputLabel id={`select-outlined-${label}-${serviceIndex}`}>
          {label}
        </InputLabel>
      </Box>
      <Select
        labelId={`select-outlined-label-${label}-${serviceIndex}`}
        id={`select-outlined-label-${label}-${serviceIndex}`}
        value={value || options[0]}
        onChange={handleChange}
        label={label}
      >
        {_.map(options, (option, i) => (
          <MenuItem key={i} value={option}>
            {option}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  )
}

This snippet shows that I am using it. If you are referring to another component, can you please share a link/example? — Logan Murphy
– Logan Murphy, Commented Oct 4, 2020 at 20:00

Logan Murphy · Accepted Answer · 2020-10-05 22:02:13Z

1

After researching this further, I found a component in the Material-UI library that will get the job done. https://material-ui.com/api/autocomplete/

answered Oct 5, 2020 at 22:02

Logan Murphy

4234 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shahnad S · Accepted Answer · 2021-05-26 13:32:00Z

I Understand your pain .please try this code.You can write your custom styles inside the select . enjoy !

const useStyles = makeStyles((theme: any) => ({
        select: {
                height: 300,
                overflowX: 'hidden',
                overflowY: 'auto',
                }
 }))
    
         <FormControl variant="outlined"
                        className={classes.formControl}>
                        <InputLabel
                            id="demo-simple-select-outlined-label"
                        >Production Order Id</InputLabel>
                        <Select
                            labelId="demo-simple-select-outlined-label"
                            id="demo-simple-select-outlined"
                            value={poMenu}
                            onChange={handleChangepoSelect}
                            label="Production Order Id"
                            fullWidth
                            margin="dense"
                            MenuProps={{ classes: { paper: classes.select } }} >
                            {poSelectMenu.map((option: string, i: number) =>
                                <MenuItem key={i} value={option}>{option}</MenuItem>
                            )}
                        </Select>
                    </FormControl>

Collectives™ on Stack Overflow

Material-UI Select customization

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related