From 8c79c53ae189e4be4ff296cbbca1f807915cb953 Mon Sep 17 00:00:00 2001 From: yash49 <49yash@gmail.com> Date: Sat, 21 Sep 2024 01:24:43 +0530 Subject: [PATCH 1/7] [mui-material][Rating] use rating name for id generation --- packages/mui-material/src/Rating/Rating.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index 7f5c9447b1e0da..d3c7e7d6a33ec0 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -242,7 +242,8 @@ function RatingItem(props) { const isFocused = itemValue <= focus; const isChecked = itemValue === ratingValueRounded; - const id = useId(); + const id = `${name ? `${name}-` : ''}${useId()}`; + const container = ( Date: Fri, 27 Sep 2024 21:13:38 +0530 Subject: [PATCH 2/7] review changes Co-authored-by: Zeeshan Tamboli Signed-off-by: Yash Shah <49yash@gmail.com> --- packages/mui-material/src/Rating/Rating.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index d3c7e7d6a33ec0..7004980fcf8c54 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -242,7 +242,7 @@ function RatingItem(props) { const isFocused = itemValue <= focus; const isChecked = itemValue === ratingValueRounded; - const id = `${name ? `${name}-` : ''}${useId()}`; + const id = name ? `${name}-${useId()}` : useId(); const container = ( Date: Sat, 28 Sep 2024 01:22:01 +0530 Subject: [PATCH 3/7] add rating unit test --- packages/mui-material/src/Rating/Rating.js | 2 +- packages/mui-material/src/Rating/Rating.test.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index 7004980fcf8c54..92b4b807cd1d9d 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -242,7 +242,7 @@ function RatingItem(props) { const isFocused = itemValue <= focus; const isChecked = itemValue === ratingValueRounded; - const id = name ? `${name}-${useId()}` : useId(); + const id = (name ? `${name}-` : '') + useId(); const container = ( ', () => { expect(new Set(radios.map((radio) => radio.name))).to.have.length(1); }); + it('should use `name` as prefix of input element ids', () => { + render(); + + const radios = document.querySelectorAll('input[type="radio"]'); + + for (let i = 0; i < radios.length; i += 1) { + expect(radios[i].getAttribute('id')).to.match(/^rating-test/); + } + }); + describe('prop: readOnly', () => { it('renders a role="img"', () => { render(); From ba439cbd089fd7512413ba9cc676fb57698849bb Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 28 Sep 2024 10:57:51 +0530 Subject: [PATCH 4/7] improve test --- packages/mui-material/src/Rating/Rating.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js index 56f289ef7aa66f..5e8f8e948f7216 100644 --- a/packages/mui-material/src/Rating/Rating.test.js +++ b/packages/mui-material/src/Rating/Rating.test.js @@ -218,7 +218,7 @@ describe('', () => { const radios = document.querySelectorAll('input[type="radio"]'); for (let i = 0; i < radios.length; i += 1) { - expect(radios[i].getAttribute('id')).to.match(/^rating-test/); + expect(radios[i].getAttribute('id')).to.match(/^rating-test-/); } }); From 9ea2aa8f0629df648f6d1724b74a56cb788b6843 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 28 Sep 2024 10:58:07 +0530 Subject: [PATCH 5/7] fix name API typo --- docs/translations/api-docs/rating/rating.json | 2 +- packages/mui-material/src/Rating/Rating.d.ts | 2 +- packages/mui-material/src/Rating/Rating.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/translations/api-docs/rating/rating.json b/docs/translations/api-docs/rating/rating.json index 7adde99b395e17..277a5c7034490a 100644 --- a/docs/translations/api-docs/rating/rating.json +++ b/docs/translations/api-docs/rating/rating.json @@ -19,7 +19,7 @@ "IconContainerComponent": { "description": "The component containing the icon." }, "max": { "description": "Maximum rating." }, "name": { - "description": "The name attribute of the radio input elements. This input name should be unique within the page. Being unique within a form is insufficient since the name is used to generated IDs." + "description": "The name attribute of the radio input elements. This input name should be unique within the page. Being unique within a form is insufficient since the name is used to generate IDs." }, "onChange": { "description": "Callback fired when the value changes.", diff --git a/packages/mui-material/src/Rating/Rating.d.ts b/packages/mui-material/src/Rating/Rating.d.ts index b232f44adceea3..839946456d83d4 100644 --- a/packages/mui-material/src/Rating/Rating.d.ts +++ b/packages/mui-material/src/Rating/Rating.d.ts @@ -74,7 +74,7 @@ export interface RatingProps /** * The name attribute of the radio `input` elements. * This input `name` should be unique within the page. - * Being unique within a form is insufficient since the `name` is used to generated IDs. + * Being unique within a form is insufficient since the `name` is used to generate IDs. */ name?: string; /** diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index 92b4b807cd1d9d..a90a24e96248bf 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -706,7 +706,7 @@ Rating.propTypes /* remove-proptypes */ = { /** * The name attribute of the radio `input` elements. * This input `name` should be unique within the page. - * Being unique within a form is insufficient since the `name` is used to generated IDs. + * Being unique within a form is insufficient since the `name` is used to generate IDs. */ name: PropTypes.string, /** From 42b1e735fb50bd8ecdd91365f0f5f662379cd340 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 28 Sep 2024 11:00:29 +0530 Subject: [PATCH 6/7] run CI From c2eb03461d348b2a4b2b5d854858595cb740020c Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 28 Sep 2024 12:32:55 +0530 Subject: [PATCH 7/7] improve code and add comment --- packages/mui-material/src/Rating/Rating.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index a90a24e96248bf..0bdc81e0b81c0f 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -242,7 +242,11 @@ function RatingItem(props) { const isFocused = itemValue <= focus; const isChecked = itemValue === ratingValueRounded; - const id = (name ? `${name}-` : '') + useId(); + // "name" ensures unique IDs across different Rating components in React 17, + // preventing one component from affecting another. React 18's useId already handles this. + // Update to const id = useId(); when React 17 support is dropped. + // More details: https://github.com/mui/material-ui/issues/40997 + const id = `${name}-${useId()}`; const container = (