move last item list logic to grouped listing component

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}>

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">