fix: fixes focus moving to next cell when using arrow keys on slider (#1338)

Previously when using the Arrow Keys for changing the range slider the focus would move to the next/previous cell.
This is now prevented. The only downside is that the user has to press Tab again to move the focus outside of the slider, which in my point should be okay as he has to tab in to get focus. Additionally this is now consistent with text input filters.

Fixes #1254

Author: fredericbahr

packages/material-react-table/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -54,6 +54,13 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
 
   const isMounted = useRef(false);
 
+  // prevent moving the focus to the next/prev cell when using the arrow keys
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.stopPropagation();
+    }
+  };
+
   useEffect(() => {
     if (isMounted.current) {
       if (columnFilterValue === undefined) {
@@ -84,6 +91,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
             }
           }
         }}
+        onKeyDown={handleKeyDown}
         value={filterValues}
         valueLabelDisplay="auto"
         {...sliderProps}