fix: overlapping input label when filter select is outline

As stated in the API Documentation of MUI https://mui.com/material-ui/api/select/#props the label should be shrunk when display empty is true.

I do not know why we need the display empty. If we remove it, the error also is removed. So you should consider what the use-case for displayEmpty really is.

Fixes: #1142

Author: fredericbahr

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

@@ -453,31 +453,38 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         <TextField
           select={isSelectFilter || isMultiSelectFilter}
           {...commonTextFieldProps}
-          SelectProps={{
-            MenuProps: { disableScrollLock: true },
-            displayEmpty: true,
-            multiple: isMultiSelectFilter,
-            renderValue: isMultiSelectFilter
-              ? (selected: any) =>
-                  !Array.isArray(selected) || selected.length === 0 ? (
-                    <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
-                  ) : (
-                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
-                      {selected.map((value: string) => {
-                        const selectedValue = dropdownOptions?.find(
-                          (option) => getValueAndLabel(option).value === value,
-                        );
-                        return (
-                          <Chip
-                            key={value}
-                            label={getValueAndLabel(selectedValue).label}
-                          />
-                        );
-                      })}
-                    </Box>
-                  )
-              : undefined,
-            ...commonTextFieldProps.SelectProps,
+          slotProps={{
+            select: {
+              MenuProps: { disableScrollLock: true },
+              displayEmpty: true,
+              multiple: isMultiSelectFilter,
+              renderValue: isMultiSelectFilter
+                ? (selected: any) =>
+                    !Array.isArray(selected) || selected.length === 0 ? (
+                      <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
+                    ) : (
+                      <Box
+                        sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}
+                      >
+                        {selected.map((value: string) => {
+                          const selectedValue = dropdownOptions?.find(
+                            (option) =>
+                              getValueAndLabel(option).value === value,
+                          );
+                          return (
+                            <Chip
+                              key={value}
+                              label={getValueAndLabel(selectedValue).label}
+                            />
+                          );
+                        })}
+                      </Box>
+                    )
+                : undefined,
+            },
+            inputLabel: {
+              shrink: isSelectFilter || isMultiSelectFilter,
+            },
           }}
           onChange={handleTextFieldChange}
           onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}