CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
bossajie
bossajie

Reputation: 328

Material UI Select React.js

It is possible that we can change the behavior of the dropdown in Material UI Select? I want to change the behavior of <ul> where it should not look like a pop-up.

What I want to happen is the <li> will encapsulate the selected <ul> Just like what the 2nd picture attached below:

This is the current Select Component of Material UI

What I want to achieve is something like this: enter image description here

This is my code: 

<FormControl
  variant="outlined"
  className={clsx(
    classes.formControl,
    success && classes.success,
    danger && classes.danger
  )}
  required={isRequired}
>
  <InputLabel>{label}</InputLabel>
  <Select
    value={value}
    onChange={e => handleOnChange(e)}
    // MenuProps={{ classes: { paper: classes.dropdownPaper }}}
    label={label}
    name={name}
    MenuProps={{
      classes: { paper: classes.dropdownPaper },
      anchorOrigin: {
        vertical: "bottom",
        horizontal: "left"
      },
      getContentAnchorEl: null
    }}
  >
    {options.map((opt, index) => {
      return (
        <MenuItem value={opt.value} key={index}>
          {opt.text}
        </MenuItem>
      );
    })}
  </Select>
</FormControl>;

Upvotes: 0

Views: 1224

Answers (1)

nadim95
nadim95

Reputation: 114

Hope this helps:

What I would do is rather than searching in the textfield component section you need to go to the menu components section and search for the selected menu component or customized menu component is which the items pop right above the button here is a link: https://material-ui.com/components/menus/

you can also customize the "split button component" as it already has what you are looking for built in, the only thing you need to customize the color. here is a link to the button component the ""split button" is at the bottom of the page. https://material-ui.com/components/button-group/

Hope this helps.

Upvotes: 1

Related Questions