Merge pull request #287 from Ryan-Haig12/master

feat: honor inverted key down handler for horizontal sliders
zillow · Jun 2, 2023 · 5e81291 · 5e81291
2 parents 61860fc + bb0ed77
commit 5e81291
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 4 deletions.
diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
@@ -824,14 +824,28 @@ class ReactSlider extends React.Component {
 
     moveUpByStep(step = this.props.step) {
         const oldValue = this.state.value[this.state.index];
-        const newValue = trimAlignValue(oldValue + step, this.props);
-        this.move(Math.min(newValue, this.props.max));
+
+        // if the slider is inverted and horizontal we want to honor the inverted value
+        const newValue =
+            this.props.invert && this.props.orientation === 'horizontal'
+                ? oldValue - step
+                : oldValue + step;
+
+        const trimAlign = trimAlignValue(newValue, this.props);
+        this.move(Math.min(trimAlign, this.props.max));
     }
 
     moveDownByStep(step = this.props.step) {
         const oldValue = this.state.value[this.state.index];
-        const newValue = trimAlignValue(oldValue - step, this.props);
-        this.move(Math.max(newValue, this.props.min));
+
+        // if the slider is inverted and horizontal we want to honor the inverted value
+        const newValue =
+            this.props.invert && this.props.orientation === 'horizontal'
+                ? oldValue + step
+                : oldValue - step;
+
+        const trimAlign = trimAlignValue(newValue, this.props);
+        this.move(Math.max(trimAlign, this.props.min));
     }
 
     move(newValue) {

diff --git a/src/components/ReactSlider/__tests__/ReactSlider.test.js b/src/components/ReactSlider/__tests__/ReactSlider.test.js
@@ -232,6 +232,61 @@ describe('<ReactSlider>', () => {
                 onChange.mock.invocationCallOrder[1]
             );
         });
+
+        it('should handle left and right arrow keydown events when the slider is horizontal', async () => {
+            const testRenderer = renderer.create(
+                <ReactSlider min={0} max={10} step={1} thumbClassName="test-thumb" />
+            );
+            const testInstance = testRenderer.root;
+            const thumb = testInstance.findByProps({ className: 'test-thumb test-thumb-0 ' });
+            const { addEventListener } = document;
+
+            // simulate focus on thumb
+            thumb.props.onFocus();
+            expect(addEventListener.mock.calls[0][0]).toBe('keydown');
+            const onKeyDown = addEventListener.mock.calls[0][1];
+
+            onKeyDown({ key: 'ArrowLeft', preventDefault: () => {} });
+            const valueTestOne = testRenderer.toJSON().children[2].props['aria-valuenow'];
+            expect(valueTestOne).toBe(0);
+
+            thumb.props.onFocus();
+            onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
+            onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
+
+            const valueTestTwo = testRenderer.toJSON().children[2].props['aria-valuenow'];
+            expect(valueTestTwo).toBe(2);
+        });
+
+        it('should handle left and right arrow keydown events when the slider is horizontal and inverted', async () => {
+            const testRenderer = renderer.create(
+                <ReactSlider invert min={0} max={10} step={1} thumbClassName="test-thumb" />
+            );
+
+            const testInstance = testRenderer.root;
+            const thumb = testInstance.findByProps({ className: 'test-thumb test-thumb-0 ' });
+            const { addEventListener } = document;
+
+            // simulate focus on thumb
+            thumb.props.onFocus();
+
+            expect(addEventListener.mock.calls[0][0]).toBe('keydown');
+
+            const onKeyDown = addEventListener.mock.calls[0][1];
+
+            onKeyDown({ key: 'ArrowLeft', preventDefault: () => {} });
+            onKeyDown({ key: 'ArrowLeft', preventDefault: () => {} });
+            onKeyDown({ key: 'ArrowLeft', preventDefault: () => {} });
+
+            const valueTestOne = testRenderer.toJSON().children[2].props['aria-valuenow'];
+            expect(valueTestOne).toBe(3);
+
+            onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
+            onKeyDown({ key: 'ArrowRight', preventDefault: () => {} });
+
+            const valueTestTwo = testRenderer.toJSON().children[2].props['aria-valuenow'];
+            expect(valueTestTwo).toBe(1);
+        });
     });
 
     it('should replace state value when props value changes', () => {