Fix arrow keys past the end for Slider with custom marks

Fixes mui#45049
joshkel · Jan 17, 2025 · 48c4b12 · 48c4b12
1 parent c4f898d
commit 48c4b12
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
@@ -1195,6 +1195,54 @@ describe('<Slider />', () => {
         });
       });
     });
+
+    it(`stops at the max value with custom marks`, () => {
+      const handleChange = stub().callsFake((_event, value) => value);
+      const { getByRole } = render(
+        <Slider
+          marks={[10, 20, 30].map((value) => ({ value }))}
+          step={null}
+          value={30}
+          onChange={handleChange}
+        />,
+      );
+
+      const slider = getByRole('slider');
+      expect(slider).to.have.attribute('aria-valuenow', '30');
+
+      act(() => {
+        slider.focus();
+      });
+
+      fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+      expect(handleChange.callCount).to.equal(0);
+      expect(slider).to.have.attribute('aria-valuenow', '30');
+    });
+
+    it(`stops at the min value with custom marks`, () => {
+      const handleChange = stub().callsFake((_event, value) => value);
+      const { getByRole } = render(
+        <Slider
+          marks={[10, 20, 30].map((value) => ({ value }))}
+          step={null}
+          value={10}
+          onChange={handleChange}
+        />,
+      );
+
+      const slider = getByRole('slider');
+      expect(slider).to.have.attribute('aria-valuenow', '10');
+
+      act(() => {
+        slider.focus();
+      });
+
+      fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+      expect(handleChange.callCount).to.equal(0);
+      expect(slider).to.have.attribute('aria-valuenow', '10');
+    });
   });
 
   describe('warnings', () => {

diff --git a/packages/mui-material/src/Slider/useSlider.ts b/packages/mui-material/src/Slider/useSlider.ts
@@ -311,9 +311,9 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     let newValue: number | number[] = valueInput;
     if (marks && step == null) {
       const maxMarksValue = marksValues[marksValues.length - 1];
-      if (newValue > maxMarksValue) {
+      if (newValue >= maxMarksValue) {
         newValue = maxMarksValue;
-      } else if (newValue < marksValues[0]) {
+      } else if (newValue <= marksValues[0]) {
         newValue = marksValues[0];
       } else {
         newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];