Revert "Refactor to prevent unnecessary calls to getBoundingClientRect"

This reverts commit 9e15bd7.

src/internal/components/dropdown/dropdown-fit-handler.ts

@@ -46,7 +46,7 @@ const getClosestParentDimensions = (element: HTMLElement): any => {
 export const defaultMaxDropdownWidth = getBreakpointValue('xxs');
 
 export const getAvailableSpace = (
-  trigger: DOMRect,
+  trigger: HTMLElement,
   dropdown: HTMLElement,
   overflowParents: ReadonlyArray<Dimensions>,
   stretchWidth = false,
@@ -63,12 +63,12 @@ export const getAvailableSpace = (
     : isMobile
     ? AVAILABLE_SPACE_RESERVE_MOBILE_HORIZONTAL
     : AVAILABLE_SPACE_RESERVE_DEFAULT;
-  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger;
+  const { bottom: triggerBottom, left: triggerLeft, right: triggerRight } = trigger.getBoundingClientRect();
 
   return overflowParents.reduce(
     ({ above, below, left, right }, overflowParent) => {
       const offsetTop = triggerBottom - overflowParent.top;
-      const currentAbove = offsetTop - trigger.height - availableSpaceReserveVertical;
+      const currentAbove = offsetTop - trigger.offsetHeight - availableSpaceReserveVertical;
       const currentBelow = overflowParent.height - offsetTop - availableSpaceReserveVertical;
       const currentLeft = triggerRight - overflowParent.left - availableSpaceReserveHorizontal;
       const currentRight = overflowParent.left + overflowParent.width - triggerLeft - availableSpaceReserveHorizontal;
@@ -123,7 +123,7 @@ export const getInteriorAvailableSpace = (
 };
 
 export const getDropdownPosition = ({
-  triggerBox,
+  triggerElement,
   dropdownElement,
   overflowParents,
   minWidth: desiredMinWidth,
@@ -133,7 +133,7 @@ export const getDropdownPosition = ({
   isMobile = false,
   stretchBeyondTriggerWidth = false,
 }: {
-  triggerBox: DOMRect;
+  triggerElement: HTMLElement;
   dropdownElement: HTMLElement;
   overflowParents: ReadonlyArray<Dimensions>;
   minWidth?: number;
@@ -145,15 +145,15 @@ export const getDropdownPosition = ({
 }): DropdownPosition => {
   // Determine the space available around the dropdown that it can grow in
   const availableSpace = getAvailableSpace(
-    triggerBox,
+    triggerElement,
     dropdownElement,
     overflowParents,
     stretchWidth,
     stretchHeight,
     isMobile
   );
   // Determine the width of the trigger
-  const triggerWidth = triggerBox.width;
+  const triggerWidth = triggerElement.getBoundingClientRect().width;
   // Minimum width is determined by either an explicit number (desiredMinWidth) or the trigger width
   const minWidth = desiredMinWidth ? Math.min(triggerWidth, desiredMinWidth) : triggerWidth;
   // If stretchBeyondTriggerWidth is true, the maximum width is the XS breakpoint (465px) or the trigger width (if bigger).
@@ -280,11 +280,10 @@ export const calculatePosition = (
   dropdownElement.classList.remove(styles['dropdown-drop-up']);
 
   const overflowParents = getOverflowParentDimensions(dropdownElement, interior, expandToViewport, stretchHeight);
-  const triggerBox = triggerElement.getBoundingClientRect();
   const position = interior
     ? getInteriorDropdownPosition(triggerElement, dropdownElement, overflowParents, isMobile)
     : getDropdownPosition({
-        triggerBox,
+        triggerElement,
         dropdownElement,
         overflowParents,
         minWidth,
@@ -294,5 +293,6 @@ export const calculatePosition = (
         isMobile,
         stretchBeyondTriggerWidth,
       });
+  const triggerBox = triggerElement.getBoundingClientRect();
   return [position, triggerBox];
 };