diff --git a/src/components/CategoryList/CategoryList.react.js b/src/components/CategoryList/CategoryList.react.js index 3f836a51ca..6503148236 100644 --- a/src/components/CategoryList/CategoryList.react.js +++ b/src/components/CategoryList/CategoryList.react.js @@ -88,7 +88,7 @@ export default class CategoryList extends React.Component { // If a matching filter is found, auto-expand this class if (matchIndex !== -1 && !this.state.openClasses.includes(id)) { - this.setState({ openClasses: [id] }); + this.setState(prevState => ({ openClasses: [...prevState.openClasses, id] })); } break; } @@ -175,7 +175,19 @@ export default class CategoryList extends React.Component { title={c.name} to={{ pathname: link }} className={className} - onClick={() => this.props.classClicked()} + onClick={() => { + if (typeof this.props.classClicked === 'function') { + this.props.classClicked(); + } + // Auto-expand filter list when clicking on a class that has filters + if ((c.filters || []).length > 0) { + this.setState(prevState => ({ + openClasses: prevState.openClasses.includes(id) + ? prevState.openClasses + : [...prevState.openClasses, id] + })); + } + }} > {c.name} @@ -249,5 +261,6 @@ CategoryList.propTypes = { ), current: PropTypes.string.describe('Id of current category to be highlighted.'), linkPrefix: PropTypes.string.describe('Link prefix used to generate link path.'), + classClicked: PropTypes.func.describe('Callback function invoked when a class is clicked.'), onEditFilter: PropTypes.func.describe('Callback function for editing a filter.'), };