[Slider] Fixed incorrect marks displayed due to duplicate keys in ran…

…ge (mui#33526)
daniel-rabe · Nov 29, 2022 · c924dfc · c924dfc
1 parent a14f5e8
commit c924dfc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js
@@ -210,7 +210,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
           }
 
           return (
-            <React.Fragment key={mark.value}>
+            <React.Fragment key={index}>
               <Mark
                 data-index={index}
                 {...markProps}

diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
@@ -987,6 +987,18 @@ describe('<Slider />', () => {
     expect(container.querySelectorAll(`.${classes.mark}[data-index="2"]`).length).to.equal(1);
   });
 
+  it('should correctly display mark labels when ranges slider have the same start and end', () => {
+    const getMarks = (value) => value.map((val) => ({ value: val, label: val }));
+
+    const { container, setProps } = render(
+      <Slider value={[100, 100]} marks={getMarks([100, 100])} />,
+    );
+    expect(container.querySelectorAll(`.${classes.markLabel}`).length).to.equal(2);
+
+    setProps({ value: [40, 60], marks: getMarks([40, 60]) });
+    expect(container.querySelectorAll(`.${classes.markLabel}`).length).to.equal(2);
+  });
+
   it('should pass "name" and "value" as part of the event.target for onChange', () => {
     const handleChange = stub().callsFake((event) => event.target);
     const { getByRole } = render(