fix: date and time picker filters on mobile screensizes (#930)

packages/material-react-table/src/inputs/MRT_FilterTextField.tsx

@@ -353,7 +353,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       }
     },
     margin: 'none',
-    onClick: (e: MouseEvent<HTMLInputElement>) => e.stopPropagation(),
     placeholder:
       filterChipLabel || isSelectFilter || isMultiSelectFilter
         ? undefined
@@ -459,6 +458,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
                 ...commonTextFieldProps?.inputProps,
               }}
               onChange={handleTextFieldChange}
+              onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
             />
           )}
           value={filterValue}
@@ -493,6 +493,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             ...commonTextFieldProps.SelectProps,
           }}
           onChange={handleTextFieldChange}
+          onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
           value={filterValue ?? ''}
         >
           {(isSelectFilter || isMultiSelectFilter) && [

packages/material-react-table/stories/fixed-bugs/mobile-date-pickers.stories.tsx

@@ -0,0 +1,74 @@
+
+import {
+  MaterialReactTable,
+} from '../../src';
+import { faker } from '@faker-js/faker';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Fixed Bugs/mobile date pickers',
+};
+
+export default meta;
+
+const data = [...Array(120)].map(() => ({
+  arrivalTime: faker.date.recent(),
+  birthDate: faker.date.birthdate({ max: 2020, min: 1980 }),
+  deliverySlot: faker.date.recent(),
+  departureTime: faker.date.recent(),
+  hireDate: faker.date.birthdate({ max: 2024, min: 2011 }),
+  startTime: faker.date.recent(),
+}));
+
+
+export const MobileDateTimePickers = () => (
+  <MaterialReactTable
+    columns={[
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.birthDate), //transform data before processing so sorting works
+        filterFn: 'lessThan',
+        filterVariant: 'date',
+        header: 'Birth Date',
+        id: 'birthDate',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.hireDate), //transform data before processing so sorting works
+        filterVariant: 'date-range',
+        header: 'Hire Date',
+        id: 'hireDate',
+      },
+      { 
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.departureTime), //transform data before processing so sorting works
+        filterVariant: 'datetime',
+        header: 'Departure',
+        id: 'departureTime',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.arrivalTime), //transform data before processing so sorting works
+        filterVariant: 'datetime-range',
+        header: 'Arrival time',
+        id: 'arrivalTime',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.startTime), //transform data before processing so sorting works
+        filterVariant: 'time',
+        header: 'Start Time',
+        id: 'startTime',
+      },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.deliverySlot), //transform data before processing so sorting works
+        filterVariant: 'time-range',
+        header: 'Delivery Slot',
+        id: 'deliverySlot',
+      },
+    ]}
+    data={data}
+    initialState={{ showColumnFilters: true }}
+  />
+);