fix multi-select being empty (#1273)

Author: richardsolomou

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

@@ -459,11 +459,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             multiple: isMultiSelectFilter,
             renderValue: isMultiSelectFilter
               ? (selected: any) =>
-                  !selected?.length ? (
+                  !Array.isArray(selected) || selected.length === 0 ? (
                     <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
                   ) : (
                     <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
-                      {(selected as string[])?.map((value) => {
+                      {selected.map((value: string) => {
                         const selectedValue = dropdownOptions?.find(
                           (option) => getValueAndLabel(option).value === value,
                         );
@@ -481,7 +481,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           }}
           onChange={handleTextFieldChange}
           onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-          value={filterValue ?? ''}
+          value={
+            isMultiSelectFilter
+              ? Array.isArray(filterValue)
+                ? filterValue
+                : []
+              : ''
+          }
         >
           {(isSelectFilter || isMultiSelectFilter) && [
             <MenuItem disabled divider hidden key="p" value="">

packages/material-react-table/stories/features/Filtering.stories.tsx

@@ -73,11 +73,11 @@ const data = [...Array(120)].map(() => ({
   address: faker.location.streetAddress(),
   age: faker.number.int(100),
   arrivalTime: faker.date.recent(),
-  birthDate: faker.date.birthdate({ max: 2020, min: 1980 }),
+  birthDate: faker.date.birthdate({ max: 2020, min: 1980, mode: 'age' }),
   departureTime: faker.date.recent(),
   firstName: faker.person.firstName(),
   gender: Math.random() < 0.8 ? faker.person.sex() : faker.person.gender(),
-  hireDate: faker.date.birthdate({ max: 2024, min: 2011 }),
+  hireDate: faker.date.birthdate({ max: 2024, min: 2011, mode: 'age' }),
   isActive: faker.datatype.boolean(),
   lastName: faker.person.lastName(),
   state: faker.location.state(),

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

@@ -10,10 +10,10 @@ export default meta;
 
 const data = [...Array(120)].map(() => ({
   arrivalTime: faker.date.recent(),
-  birthDate: faker.date.birthdate({ max: 2020, min: 1980 }),
+  birthDate: faker.date.birthdate({ max: 2020, min: 1980, mode: 'age' }),
   deliverySlot: faker.date.recent(),
   departureTime: faker.date.recent(),
-  hireDate: faker.date.birthdate({ max: 2024, min: 2011 }),
+  hireDate: faker.date.birthdate({ max: 2024, min: 2011, mode: 'age' }),
   startTime: faker.date.recent(),
 }));