fix(ObjectPage): prevent crash on re-mount (#1317)

Author: MarcusNotheis

packages/main/src/components/ObjectPage/ObjectPageUtils.ts

@@ -12,7 +12,7 @@ export const extractSectionIdFromHtmlId = (id: string) => {
 };
 
 export const getLastObjectPageSection = (ref: RefObject<HTMLDivElement>): HTMLElement => {
-  const sections = ref.current.querySelectorAll<HTMLElement>('[id^="ObjectPageSection"]');
+  const sections = ref.current?.querySelectorAll<HTMLElement>('[id^="ObjectPageSection"]');
   if (!sections || sections.length < 1) {
     return null;
   }

packages/main/src/components/ObjectPage/index.tsx

@@ -316,23 +316,31 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
 
   useEffect(() => {
     const fillerDivObserver = new ResizeObserver(() => {
+      let heightDiff = 0;
+
       const maxHeight = Math.min(objectPageRef.current?.clientHeight, window.innerHeight);
       const availableScrollHeight = maxHeight - totalHeaderHeight;
       const lastSectionDomRef = getLastObjectPageSection(objectPageRef);
-      const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]');
 
-      let lastSubSectionHeight;
-      if (subSections.length > 0) {
-        lastSubSectionHeight = (subSections[subSections.length - 1] as HTMLElement).offsetHeight;
-      } else {
-        lastSubSectionHeight =
-          lastSectionDomRef.offsetHeight -
-          lastSectionDomRef.querySelector<HTMLElement>("[role='heading']").offsetHeight;
-      }
+      if (lastSectionDomRef) {
+        const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]');
+
+        let lastSubSectionHeight;
+        if (subSections.length > 0) {
+          lastSubSectionHeight = (subSections[subSections.length - 1] as HTMLElement).offsetHeight;
+        } else {
+          lastSubSectionHeight =
+            lastSectionDomRef.offsetHeight -
+            lastSectionDomRef.querySelector<HTMLElement>("[role='heading']").offsetHeight;
+        }
+
+        heightDiff = Math.max(0, availableScrollHeight - lastSubSectionHeight);
 
-      let heightDiff = availableScrollHeight - lastSubSectionHeight;
+        if (isNaN(heightDiff)) {
+          heightDiff = 0;
+        }
+      }
 
-      heightDiff = heightDiff > 0 ? heightDiff : 0;
       objectPageRef.current?.style.setProperty(ObjectPageCssVariables.lastSectionMargin, `${heightDiff}px`);
     });
 

yarn.lock

@@ -367,7 +367,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
-"@babel/helper-validator-option@^7.12.16", "@babel/helper-validator-option@^7.12.17":
+"@babel/helper-validator-option@^7.12.17":
   version "7.12.17"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831"
   integrity sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==
@@ -1233,15 +1233,6 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.12.17":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.17.tgz#9d711eb807e0934c90b8b1ca0eb1f7230d150963"
-  integrity sha512-tNMDjcv/4DIcHxErTgwB9q2ZcYyN0sUfgGKUK/mm1FJK7Wz+KstoEekxrl/tBiNDgLK1HGi+sppj1An/1DR4fQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    lodash "^4.17.19"
-    to-fast-properties "^2.0.0"
-
 "@base2/pretty-print-object@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"