From c41d8781cfdab8e96cd46f1554de2ee28f116851 Mon Sep 17 00:00:00 2001
From: Monica Wheeler <monica.wheeler@kajabi.com>
Date: Mon, 11 Mar 2024 11:08:40 -0500
Subject: [PATCH 1/2] fix(dropdown): prevent null reference errors on dynamic
 positioning

Add a guard clause in the positionElement function to check for null
before accessing wrapperRef.current properties. This prevents runtime
errors related to attempting to access properties on null when the
dropdown component mounts or updates under certain conditions. Solves
Sentry errors "Cannot read properties of null (reading lastElementChild)"
and "null is not an object (evaluating r.lastElementChild)".
---
 packages/sage-system/lib/dropdown.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/sage-system/lib/dropdown.js b/packages/sage-system/lib/dropdown.js
index f1a35d6171..c0134fbbf4 100644
--- a/packages/sage-system/lib/dropdown.js
+++ b/packages/sage-system/lib/dropdown.js
@@ -190,8 +190,12 @@ Sage.dropdown = (function () {
   }
 
   function positionElement(el) {
+    // Guard clause to check if wrapperRef.current is null
+    if (!wrapperRef.current) return;
+
     let directionX = null;
     let directionY = null;
+    const el = wrapperRef.current;
   
     // Elements
     const button = el;

From 10a9683858d3e0b1f40c5ecad7ea855339d0f1fd Mon Sep 17 00:00:00 2001
From: Monica Wheeler <monica.wheeler@kajabi.com>
Date: Mon, 11 Mar 2024 12:00:29 -0500
Subject: [PATCH 2/2] fix(dropdown): fix duplicative variable and parameter

---
 packages/sage-system/lib/dropdown.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/sage-system/lib/dropdown.js b/packages/sage-system/lib/dropdown.js
index c0134fbbf4..bcbfb50fae 100644
--- a/packages/sage-system/lib/dropdown.js
+++ b/packages/sage-system/lib/dropdown.js
@@ -189,24 +189,23 @@ Sage.dropdown = (function () {
     return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
   }
 
-  function positionElement(el) {
+  function positionElement(dropdownElement) {
     // Guard clause to check if wrapperRef.current is null
-    if (!wrapperRef.current) return;
+    if (!dropdownElement) return;
 
     let directionX = null;
     let directionY = null;
-    const el = wrapperRef.current;
   
     // Elements
-    const button = el;
-    const panel = el.lastElementChild;
+    const button = dropdownElement;
+    const panel = dropdownElement.lastElementChild;
     const win = panel.ownerDocument.defaultView;
     const docEl = window.document.documentElement;
 
     panel.style.top = ''; // resets the style
     panel.style.left = ''; // resets the style
     panel.style.right = ''; // resets the style
-  
+
     // Dimensions
     const buttonDimensions = button.getBoundingClientRect();
     const panelDimensions = panel.getBoundingClientRect();
@@ -215,14 +214,14 @@ Sage.dropdown = (function () {
       top: (buttonDimensions.height / 2) + panelDimensions.height,
       left: (buttonDimensions.width / 2) + panelDimensions.width,
     };
-  
+
     const viewport = {
       top: docEl.scrollTop,
       bottom: window.pageYOffset + docEl.clientHeight,
       left: docEl.scrollLeft,
       right: window.pageXOffset + docEl.clientWidth,
     };
-  
+
     const offset = {
       top: panelDimensions.top + win.pageYOffset,
       left: panelDimensions.left + win.pageXOffset,
@@ -257,7 +256,7 @@ Sage.dropdown = (function () {
     } else if (!enoughSpaceLeft && enoughSpaceRight) {
       directionX = 'right';
     }
-    
+
     if (directionX === 'left') {
       panel.style.left = 'inherit';
       panel.style.right = 0;
@@ -266,7 +265,7 @@ Sage.dropdown = (function () {
       panel.style.right = 'inherit';
     }
   }
-  
+
   function open(el) {
     el.setAttribute("aria-expanded", "true");
     positionElement(el);