[Slider] Arrow keys control does not work with float numbers (#37071)

Co-authored-by: seunexplicit <[email protected]>
mui · Jun 16, 2023 · 2d6544b · 2d6544b
1 parent 65af1e2
commit 2d6544b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
@@ -329,20 +329,18 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet
       let newValue = event.target.valueAsNumber;
 
       if (marks && step == null) {
-        newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
+        const maxMarksValue = marksValues[marksValues.length - 1];
+        if (newValue > maxMarksValue) {
+          newValue = maxMarksValue;
+        } else if (newValue < marksValues[0]) {
+          newValue = marksValues[0];
+        } else {
+          newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
+        }
       }
 
       newValue = clamp(newValue, min, max);
 
-      if (marks && step == null) {
-        const currentMarkIndex = marksValues.indexOf(values[index]);
-
-        newValue =
-          newValue < values[index]
-            ? marksValues[currentMarkIndex - 1]
-            : marksValues[currentMarkIndex + 1];
-      }
-
       if (range) {
         // Bound the new value to the thumb's neighbours.
         if (disableSwap) {
@@ -683,7 +681,7 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet
       type: 'range',
       min: parameters.min,
       max: parameters.max,
-      step: parameters.step ?? undefined,
+      step: parameters.step === null && parameters.marks ? 'any' : parameters.step ?? undefined,
       disabled,
       ...mergedEventHandlers,
       style: {

diff --git a/packages/mui-base/src/useSlider/useSlider.types.ts b/packages/mui-base/src/useSlider/useSlider.types.ts
@@ -134,7 +134,7 @@ export type UseSliderHiddenInputOwnProps = {
   onBlur: React.FocusEventHandler;
   onChange: React.ChangeEventHandler;
   onFocus: React.FocusEventHandler;
-  step?: number;
+  step?: number | 'any';
   style: React.CSSProperties;
   tabIndex?: number;
   type?: React.InputHTMLAttributes<HTMLInputElement>['type'];

diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
@@ -295,6 +295,34 @@ describe('<Slider />', () => {
       expect(document.activeElement).to.have.attribute('data-index', '1');
     });
 
+    it('custom marks with restricted float values should support keyboard', () => {
+      const getMarks = (value) => value.map((val) => ({ value: val, label: val }));
+
+      const { getByRole } = render(<Slider step={null} marks={getMarks([0.5, 30.45, 90.53])} />);
+      const slider = getByRole('slider');
+
+      act(() => {
+        slider.focus();
+      });
+
+      fireEvent.change(slider, { target: { value: '0.4' } });
+      expect(slider.getAttribute('aria-valuenow')).to.equal('0.5');
+
+      fireEvent.change(slider, { target: { value: '30' } });
+      expect(slider.getAttribute('aria-valuenow')).to.equal('30.45');
+
+      fireEvent.change(slider, { target: { value: '90' } });
+      expect(slider.getAttribute('aria-valuenow')).to.equal('90.53');
+
+      fireEvent.change(slider, { target: { value: '100' } });
+      expect(slider.getAttribute('aria-valuenow')).to.equal('90.53');
+
+      fireEvent.change(slider, { target: { value: '30' } });
+      expect(slider.getAttribute('aria-valuenow')).to.equal('30.45');
+
+      expect(document.activeElement).to.have.attribute('data-index', '0');
+    });
+
     it('should focus the slider when dragging', () => {
       const { getByRole, getByTestId, container } = render(
         <Slider