Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Filters - Clearing autocomplete filter #1351

Open
wants to merge 2 commits into
base: v3
Choose a base branch
from
Open

fix: Filters - Clearing autocomplete filter #1351

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ea078b
fix: Filters - Clearing autocomplete filter using "Clear Filter" rath…
Jan 2, 2025
cfbc658
changed autocompleteValue initializer to return actual column filterV…
Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import {
type ChangeEvent,
type MouseEvent,
SyntheticEvent,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import Autocomplete, { AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import Chip from '@mui/material/Chip';
Expand Down Expand Up @@ -143,11 +144,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
? (column.getFilterValue() as [string, string])?.[
rangeFilterIndex as number
] || ''
: isAutocompleteFilter
? typeof column.getFilterValue() === 'string' ? column.getFilterValue() as string : ''
: ((column.getFilterValue() as string) ?? ''),
);
const [autocompleteValue, setAutocompleteValue] =
useState<DropdownOption | null>(
isAutocompleteFilter ? (filterValue as DropdownOption | null) : null,
() => isAutocompleteFilter ? ((column.getFilterValue() || null) as DropdownOption | null) : null,
);

const handleChangeDebounced = useCallback(
Expand Down Expand Up @@ -184,9 +187,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
textFieldProps?.onChange?.(event);
};

const handleAutocompleteInputChange = (_event: SyntheticEvent, newValue: string, _reason: AutocompleteInputChangeReason) => {
handleChange(newValue)
};

const handleAutocompleteChange = (newValue: DropdownOption | null) => {
setAutocompleteValue(newValue);
handleChange(getValueAndLabel(newValue).value);
handleChangeDebounced(getValueAndLabel(newValue).value);
};

const handleClear = () => {
Expand All @@ -200,6 +207,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
newFilterValues[rangeFilterIndex as number] = undefined;
return newFilterValues;
});
} else if (isAutocompleteFilter) {
setAutocompleteValue(null)
setFilterValue('')
// when using 'autocomplete' this function is called only inside effect and only if the filterValue === undefined
// so the following call is excessive; should be uncommented if the handleClear becomes part of the Autocomplete component callbacks
// column.setFilterValue(undefined)
} else {
setFilterValue('');
column.setFilterValue(undefined);
Expand Down Expand Up @@ -434,6 +447,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
options={
dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
}
inputValue={filterValue as string}
onInputChange={handleAutocompleteInputChange}
{...autocompleteProps}
renderInput={(builtinTextFieldProps: TextFieldProps) => (
<TextField
Expand All @@ -455,7 +470,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
...commonTextFieldProps?.slotProps?.htmlInput,
},
}}
onChange={handleTextFieldChange}
onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
/>
)}
Expand Down