MUI Select custom MenuItem not working properly

Asked
Active3 hr before
Viewed126 times

10 Answers

menuitemworkingproperlyselectcustom
90%

Here's the codesandbox,I have a problem regarding MUI's MenuItem when combined with Select and rendering it in a separate component.,Expected behavior: when I click on the MenuItem, it gets selected in the Select component.

You can fix this aspect by duplicating your userId prop as a value prop:

import { Select } from "@material-ui/core";
import CustomMenuItem from "./CustomMenuItem";
import React from "react";

export default function App() {
  const userIds = [1, 2, 3];
  const [value, setValue] = React.useState(1);
  console.log("value", value);
  return (
    <Select
      id="user"
      name="User"
      value={value}
      onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
        setValue(event.target.value as number);
      }}
    >
      {userIds.map((userId) => (
        <CustomMenuItem key={userId} value={userId} userId={userId} />
      ))}
    </Select>
  );
}
load more v
88%

First: renderSelectOptions: {dt.value} should be assigned to MenuItem primaryText

renderSelectOptions = () => {
        return this.state.selectOptions.map((dt, i) => {
            return (
                <MenuItem key={i} value={dt.id}>
                    {dt.value}
                </MenuItem>
            );
        });
    }

like this:

renderSelectOptions = () => {
    return this.state.selectOptions.map((dt, i) => (
      <MenuItem key={dt.id} value={dt.id} primaryText={dt.value} />
    ));
  };

And second - handle change has event, index and value arguments, so your value is acctually index - not value.

handleChange = (event, value) => {
   this.setState({
      selectedValue: value
   });
};

Should be:

  handleChange = (event, index, value) => {
     this.setState({
        selectedValue: value
     });
  };
load more v
72%

Well, at one exception, the MenuItem are portal, so we would probably need to introduce a new menu style rule to the Select component :),Oh, because you don't want to customize all the select elements in your page?,@oliviertassinari that worked for the background. But how do I disable the rippleEffect using only makeStyles ?? or do I have to do something else ??

const Example = () => {
  return (
    <MyDropdown>
      <MyDropdownOption>One</MyDropdownOption>
    </MyDropdown>
  );      
}
load more v
65%

I'm not even sure it's supported, as the shown value has those [object Object] https://codesandbox.io/s/6r4p7p2w3,We should add an example of select with checkboxes,Yes it's quite difficult to control the Menu closing from the Select, I guess it's by design, like a native Select, but it could be great

        <TextField
          fullWidth
          id="select-currency"
          select
          label="Select"
          value={selectedData}
          onChange={e => {
            this.setState({ selectedData: e.target.value });
          }}
          SelectProps={{
            multiple: true,
          }}
          margin="normal"
        >
          {data.map(({ name, description, id }) => (
            <MenuItem
              key={id}
              value={id}
              style={{
                fontWeight: selectedData.includes(id) ? '700' : '400',
              }}
            >
              <Checkbox
                checked={selectedData.includes(id)}
                onChange={e => { }}
                value=""
              />
              {name}
            </MenuItem>
          ))}
        </TextField> 
75%

The API documentation of the MenuItem React component. Learn more about the props and the CSS customization points.,You can override the style of the component thanks to one of these customization points:,Any other props supplied will be provided to the root element (ListItem).

Import

import MenuItem from '@material-ui/core/MenuItem';
// or
import {
   MenuItem
} from '@material-ui/core';
40%

The API documentation of the Select React component. Learn more about the props and the CSS customization points.,You can override the style of the component thanks to one of these customization points:,The props of the Input component are also available. You can take advantage of this behavior to target nested components.

Import

import Select from '@material-ui/core/Select';
// or
import {
   Select
} from '@material-ui/core';
22%

 Pretag team - issue, fix, solve, resolve
60%

In my opinion, it can sometimes look odd. Very interestingly, this is by design and is part of the…,If you’re here, you’re probably using Material UI — maybe with React, maybe without — and you came across the built-in functionality of the Menu component to have its MenuItem(s) popover right on top of the Menu text.

/n

If you’re here, you’re probably using Material UI — maybe with React, maybe without — and you came across the built-in functionality of the Menu component to have its MenuItem(s) popover right on top of the Menu text.

Menu
load more v
48%

Are you confused in how to make the Select of MaterialUI works fine with React Hooks Form?,In this first way is we can save some lines of code only working directly with the TextField component and add the select prop to made our input work like an select. Now through the prop inputProps that Material UI provide to us we can add prop directly to the select input component. Magic!,The function of Controller component is to wrapper the controlled component and make it easier for work with them. It was created to work with Material UI 💖

const trinityPersons = [{
      value: "father",
      text: "Father"
   },
   {
      value: "son",
      text: "Son"
   },
   {
      value: "spirit",
      text: "Holy Spirit"
   },
];
load more v
23%

import MenuItem from '@material-ui/core/MenuItem';  ,import Menu from '@material-ui/core/Menu';  ,import ListItem from '@material-ui/core/ListItem';  

 Pretag team - issue, fix, solve, resolve