[material-ui][Rating] Component does not respect name property when generating input element id

[3eggwhites]

Steps to reproduce

Link to live example: I have created a small project to demonstrate the issue, repository link can be found here: https://github.com/3eggwhites/mui-rating-component-issue/

Prerequisites

• Node: v16.20.2
• PNPM: 8.15.1

Libraries Used

• React: 17
• MUI: 5.15.7

Setup:

1. git clone https://github.com/3eggwhites/mui-rating-component-issue.git
2. cd mui-rating-component-issue
3. pnpm install
4. pnpm -r run build
5. pnpm -r run preview

Steps:

1. open http://localhost:5001/ url in Google Chrome or Safari
2. change rating value for the Remote Rating component
3. open browser devtool to inspect input element ids associated to the Rating component

Current behavior

input element ids are not generated using the name property given to Rating component Changing the value of Remote Rating component affects the state of Host Rating component.

Expected behavior

input element ids should be generated using the name property given to Rating component Changing the value of Remote Rating component should not affect the state of Host Rating component and only change the state of Remote Rating component

Context

We are trying to use Rating component in a Microfrontend project. When two microfrontends which contains the Rating component are rendered on to the same DOM, they are affecting each other's state.

On further inspection we found that the input element ids are same for the Rating components.

This issue is noticed only when using React v17, in React v18 the issue does not occur.

The name property is ignored while generating ids for the input elements of Rating component, which is not following the api documentation https://mui.com/material-ui/api/rating/#rating-prop-name

Your environment

npx @mui/envinfo

  System:
    OS: macOS 13.6.3
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
    pnpm: 8.15.1 - ~/homebrew/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Edge: 121.0.2277.106
    Safari: 17.2.1

Search keywords: Rating, material-ui

[3eggwhites]

Hello Team, Any update on this issue? @mj12albert @zannager

[ZeeshanTamboli]

@3eggwhites I am getting the following error when running pnpm install:

pnpm install
Scope: all 3 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +180
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/com.db.gtb.cbps.the-design-system/-/com.db.gtb.cbps.the-design-system
-3.3.1.tgz: Not Found - 404

No authorization header was set for the request.
Progress: resolved 180, reused 72, downloaded 2, added 11

[3eggwhites]

@3eggwhites I am getting the following error when running pnpm install:

pnpm install
Scope: all 3 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +180
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/com.db.gtb.cbps.the-design-system/-/com.db.gtb.cbps.the-design-system
-3.3.1.tgz: Not Found - 404

No authorization header was set for the request.
Progress: resolved 180, reused 72, downloaded 2, added 11

Hello @ZeeshanTamboli, my bad I have removed the bad package which was causing issue during install. Kindly clone the project again to avoid any further issues

[ZeeshanTamboli]

Not sure what could be the solution here. It's incorrect that one rating component should affect the other. I'll mark it as a bug.

[3eggwhites]

Hi Team, any update on this?

[ZeeshanTamboli]

@3eggwhites Would you like to give it a try?

[yash49]

Hi @mj12albert @ZeeshanTamboli I would like to give it a try. Do let me know if I can work on this issue or not.

[yash49]

reference - https://mui.com/material-ui/api/rating/#rating-prop-name

@mj12albert @ZeeshanTamboli the Rating component does not use name for generated ids #43829 is my proposal - using name as prefix for generated ids fixes problem described by @3eggwhites

let me know your thoughts