Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Menu] Menu Item custom attribute is not accessible on a select TextField's onChange #41307

Closed
unissAhmad opened this issue Feb 28, 2024 · 2 comments
Labels
accessibility a11y component: menu This is the name of the generic UI component, not the React module! component: text field This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material status: waiting for author Issue with insufficient information

Comments

@unissAhmad
Copy link

unissAhmad commented Feb 28, 2024

Steps to reproduce

Link to live example: (required)

Steps:

  1. import { TextField, MenuItem } from "@mui/material";
    2```
    .<TextField
    select
    label="Select Example"
    defaultValue="select"
    name="select-example"
    id="select-example"
    onChange={(event) => {
    console.log(event.target.selectedOptions[0].getAttribute("customattribute"));
    }}
    >
3.`<MenuItem value="select" customattribute="test value" >Select example</MenuItem>`


### Current behavior

The customattribute is not accessible
if we add any custom attribute to any menu item it should be accessible on onChange the same way  it is accessible in normal html 

### Expected behavior

the custom attribute of <MenuItem value="test" customattribute="custom attrubute test"> should be accessible in on change of `<TextField select   onChange={(event) => {
       console.log(event.target.value); // select
       event.target.selectedOptions[0].getAttribute("customattribute"); // undefined
   }}>`
``

### Context

i need to access two values from a menu item, get the values on onChange and make an api call which requires both of the values, but with the current situation there is no way to do so, i alos tried to pass values on object, but that is giving more issues

please fix it, because of this minor issue people choose to go with other option other than Mui

### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

Browser : Chrome
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
npm: 10.0.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (122.0.2365.52)
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.28
@mui/core-downloads-tracker: 5.15.1
@mui/envinfo: ^2.0.18 => 2.0.18
@mui/icons-material: ^5.15.1 => 5.15.1
@mui/lab: ^5.0.0-alpha.159 => 5.0.0-alpha.159
@mui/material: ^5.15.1 => 5.15.1
@mui/private-theming: 5.15.3
@mui/styled-engine: 5.15.3
@mui/system: 5.15.3
@mui/types: 7.2.12
@mui/utils: 5.15.3
@types/react: 18.2.45
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.9.5 => 4.9.5

</details>


**Search keywords**: MenuItem, TextField
@unissAhmad unissAhmad added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 28, 2024
@danilo-leal danilo-leal changed the title MenuItem custom attribute not accessible on <TextField select> onChange. in normal html <select> and <option> case custom attribute can be accessed with event.target.selectedOptions[0].getAttribute("customattribute") but in this case event.target.selectedOptions[0].getAttribute is undefined [material-ui][Menu] Menu Item custom attribute is not accessible on a select TextField's onChange Feb 28, 2024
@danilo-leal danilo-leal added accessibility a11y component: menu This is the name of the generic UI component, not the React module! component: text field This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels Feb 28, 2024
@ZeeshanTamboli
Copy link
Member

It doesn't look like this bug report has proper info for one of us to reproduce it.
Please provide a Stackblitz (https://stackblitz.com/edit/stackblitz-starters-maxhor), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve.

@ZeeshanTamboli ZeeshanTamboli added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 9, 2024
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: menu This is the name of the generic UI component, not the React module! component: text field This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material status: waiting for author Issue with insufficient information
Projects
None yet
Development

No branches or pull requests

4 participants