[Slider] Handle RTL on keyboard

mui · Apr 30, 2020 · 8fd2b89 · 8fd2b89
1 parent daa9795
commit 8fd2b89
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
@@ -425,13 +425,17 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     setOpen(-1);
   });
 
+  const isRtl = theme.direction === 'rtl';
+
   const handleKeyDown = useEventCallback((event) => {
     const index = Number(event.currentTarget.getAttribute('data-index'));
     const value = values[index];
     const tenPercents = (max - min) / 10;
     const marksValues = marks.map((mark) => mark.value);
     const marksIndex = marksValues.indexOf(value);
     let newValue;
+    const ArrowRight = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const ArrowLeft = isRtl ? 'ArrowRight' : 'ArrowLeft';
 
     switch (event.key) {
       case 'Home':
@@ -450,15 +454,15 @@ const Slider = React.forwardRef(function Slider(props, ref) {
           newValue = value - tenPercents;
         }
         break;
-      case 'ArrowRight':
+      case ArrowRight:
       case 'ArrowUp':
         if (step) {
           newValue = value + step;
         } else {
           newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1];
         }
         break;
-      case 'ArrowLeft':
+      case ArrowLeft:
       case 'ArrowDown':
         if (step) {
           newValue = value - step;
@@ -503,7 +507,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
 
   const previousIndex = React.useRef();
   let axis = orientation;
-  if (theme.direction === 'rtl' && orientation === 'horizontal') {
+  if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';
   }
 

diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
@@ -393,7 +393,15 @@ describe('<Slider />', () => {
     });
 
     it('should handle RTL', () => {
-      const { getByRole } = render(<Slider defaultValue={30} />);
+      const { getByRole } = render(
+        <ThemeProvider
+          theme={createMuiTheme({
+            direction: 'rtl',
+          })}
+        >
+          <Slider defaultValue={30} />
+        </ThemeProvider>,
+      );
       const thumb = getByRole('slider');
       thumb.focus();