diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx index 41ed6dffcc7c70bbf0ea3b66cad9ab358d78ccfb..c58d3608c94b7f74ca2573c0857e18267f7fe88a 100644 --- a/src/components/library/library.jsx +++ b/src/components/library/library.jsx @@ -34,7 +34,8 @@ class LibraryComponent extends React.Component { 'handleMouseEnter', 'handleMouseLeave', 'handleSelect', - 'handleTagClick' + 'handleTagClick', + 'setFilteredDataRef' ]); this.state = { selectedItem: null, @@ -42,6 +43,12 @@ class LibraryComponent extends React.Component { selectedTag: ALL_TAG_TITLE.toLowerCase() }; } + componentDidUpdate (prevProps, prevState) { + if (prevState.filterQuery !== this.state.filterQuery || + prevState.selectedTag !== this.state.selectedTag) { + this.scrollToTop(); + } + } handleBlur (id) { this.handleMouseLeave(id); } @@ -92,6 +99,12 @@ class LibraryComponent extends React.Component { .indexOf(this.state.selectedTag) !== -1 )); } + scrollToTop () { + this.filteredDataRef.scrollTop = 0; + } + setFilteredDataRef (ref) { + this.filteredDataRef = ref; + } render () { return ( <Modal @@ -141,6 +154,7 @@ class LibraryComponent extends React.Component { className={classNames(styles.libraryScrollGrid, { [styles.withFilterBar]: this.props.filterable || this.props.tags })} + ref={this.setFilteredDataRef} > {this.getFilteredData().map((dataItem, index) => { const scratchURL = dataItem.md5 ?