diff --git a/opentech/static_src/src/app/src/components/GroupedListing/index.js b/opentech/static_src/src/app/src/components/GroupedListing/index.js index e8eb8a79a6d8086dc6ef12013050707d38a82485..daacd554202cbf275997e110bdcfdd9e2c2f6676 100644 --- a/opentech/static_src/src/app/src/components/GroupedListing/index.js +++ b/opentech/static_src/src/app/src/components/GroupedListing/index.js @@ -114,6 +114,11 @@ export default class GroupedListing extends React.Component { error }; + // set css custom prop to allow scrolling from dropdown to last item in the list + if (this.listRef.current) { + document.documentElement.style.setProperty('--last-listing-item-height', this.listRef.current.lastElementChild.offsetHeight + 'px'); + } + return ( <div className="grouped-listing"> <div className="grouped-listing__dropdown" ref={(ref) => this.dropdownContainer = ref}> diff --git a/opentech/static_src/src/app/src/components/Listing/index.js b/opentech/static_src/src/app/src/components/Listing/index.js index 4144bc3dc3d2fbbabfb6005736fd6fd466f2c7cc..d924649585c234389daa3c3b7d6d5c622c655586 100644 --- a/opentech/static_src/src/app/src/components/Listing/index.js +++ b/opentech/static_src/src/app/src/components/Listing/index.js @@ -20,10 +20,6 @@ export default class Listing extends React.Component { column: PropTypes.string, }; - componentDidUpdate() { - this.setLastItemHeight(); - } - renderListItems() { const { isError, @@ -50,8 +46,6 @@ export default class Listing extends React.Component { ); } - this.setLastItemHeight(); - return ( <ul className={`listing__list listing__list--${column}`} ref={listRef}> {items.map(v => renderItem(v))} @@ -71,14 +65,6 @@ export default class Listing extends React.Component { ); } - // set css custom prop to allow scrolling from dropdown to last item in the list - setLastItemHeight() { - // const { listRef } = this.props; - // if (listRef.current) { - // document.documentElement.style.setProperty('--last-listing-item-height', listRef.current.lastElementChild.offsetHeight + 'px'); - // } - } - render() { return ( <div className="listing">