My website features multiple filters, including by date and duration, allowing users to easily find the information they need from a large dataset.
There is also a "reset all filters" button that clears all filters and displays the full list of products.
However, I encountered an issue with one filter that utilizes a TextField from mui. The problem is that when the user enters values to filter products, those values are reset instead of clearing the field itself when using the "reset all filters" button.
For example, if a user filters only by this field, then decides to reset all filters, the entered data remains in the field even though all other filters are cleared.
I need help solving this problem.
const MAX_DURATION = 9999999
export default function FilterDuration() {
const [minDuration, setMinDuration] = useState(0);
const [maxDuration, setMaxDuration] = useState(MAX_DURATION);
useEffect(() => {
updatedFilters.durationRange = { min: minDuration, max: maxDuration }
setFilters(updatedFilters)
if (maxDuration === 0) {
setMaxDuration(MAX_DURATION)
}
}, [minDuration, maxDuration])
return (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ width: "120px" }}>
<TextField
onInput={(e) => {
const newValue = Number(e.target.value)
if (newValue )
setMinDuration(newValue)
}} />
</div>
</div>
);
}