diff --git a/packages/core/src/components/CheckboxTree/CheckboxTree.tsx b/packages/core/src/components/CheckboxTree/CheckboxTree.tsx index ed0da051c5..dcc75eb7d4 100644 --- a/packages/core/src/components/CheckboxTree/CheckboxTree.tsx +++ b/packages/core/src/components/CheckboxTree/CheckboxTree.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +/* eslint-disable guard-for-in */ import React, { useEffect, useReducer } from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import { @@ -98,6 +99,7 @@ type Option = { export type CheckboxTreeProps = { subCategories: SubCategory[]; label: string; + triggerReset?: boolean; onChange: (arg: any) => any; }; @@ -111,7 +113,8 @@ type checkOptionPayload = { type Action = | { type: 'checkOption'; payload: checkOptionPayload } | { type: 'checkCategory'; payload: string } - | { type: 'toggleCategory'; payload: string }; + | { type: 'toggleCategory'; payload: string } + | { type: 'triggerReset' }; const reducer = ( state: IndexedObject, @@ -128,21 +131,32 @@ const reducer = ( ); }); } - case 'checkCategory': + case 'checkCategory': { return produce(state, newState => { const category = newState[action.payload]; const options = category.options; category.isChecked = !category.isChecked; - // eslint-disable-next-line guard-for-in for (const option in options) { options[option].isChecked = category.isChecked; } }); + } case 'toggleCategory': return produce(state, newState => { const category = newState[action.payload]; category.isOpen = !category.isOpen; }); + case 'triggerReset': { + return produce(state, newState => { + for (const category in newState) { + newState[category].isChecked = false; + for (const option in newState[category].options) { + newState[category].options[option].isChecked = + newState[category].isChecked; + } + } + }); + } default: return state; } @@ -191,6 +205,10 @@ export const CheckboxTree = (props: CheckboxTreeProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [state]); + useEffect(() => { + dispatch({ type: 'triggerReset' }); + }, [props.triggerReset]); + return (
{props.label} diff --git a/packages/core/src/components/Select/Select.tsx b/packages/core/src/components/Select/Select.tsx index 5771786f18..9ee3e69a30 100644 --- a/packages/core/src/components/Select/Select.tsx +++ b/packages/core/src/components/Select/Select.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { createStyles, makeStyles, @@ -102,6 +102,7 @@ export type SelectProps = { label: string; placeholder?: string; onChange: (arg: any) => any; + triggerReset?: boolean; }; export const SelectComponent = (props: SelectProps) => { @@ -112,6 +113,10 @@ export const SelectComponent = (props: SelectProps) => { ); const [canOpen, setCanOpen] = React.useState(false); + useEffect(() => { + setValue(multiple ? [] : "") + }, [props.triggerReset, multiple]) + const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => { setValue(event.target.value as any); onChange(event.target.value); diff --git a/packages/core/src/components/Table/Filters.tsx b/packages/core/src/components/Table/Filters.tsx index d7b0d682be..12727643bb 100644 --- a/packages/core/src/components/Table/Filters.tsx +++ b/packages/core/src/components/Table/Filters.tsx @@ -75,11 +75,13 @@ export const Filters = (props: Props) => { const [filters, setFilters] = useState(props.filters); const [selectedFilters, setSelectedFilters] = useState({}); + const [reset, triggerReset] = useState(false); // Trigger re-rendering const handleClick = () => { setSelectedFilters({}); setFilters([...props.filters]); + triggerReset(el => !el) }; useEffect(() => { @@ -101,6 +103,7 @@ export const Filters = (props: Props) => { filters.map(filter => filter.type === 'checkbox-tree' ? ( @@ -126,6 +129,7 @@ export const Filters = (props: Props) => { /> ) : (