From de3622e609c9d3b882b92c6ac3432cfcf1d6b37c Mon Sep 17 00:00:00 2001 From: atomiks Date: Fri, 6 Dec 2024 01:05:37 +1100 Subject: [PATCH] [Select] Fix vertical text align (#967) --- .../react/src/select/popup/useSelectPopup.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/react/src/select/popup/useSelectPopup.ts b/packages/react/src/select/popup/useSelectPopup.ts index eee625f55d..04d47289c8 100644 --- a/packages/react/src/select/popup/useSelectPopup.ts +++ b/packages/react/src/select/popup/useSelectPopup.ts @@ -127,20 +127,21 @@ export function useSelectPopup(): useSelectPopup.ReturnValue { const viewportWidth = doc.documentElement.clientWidth; const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight; - const optionTextElement = selectedOptionTextRef.current; + const textElement = selectedOptionTextRef.current; const valueElement = valueRef.current; let offsetX = 0; let offsetY = 0; - if (optionTextElement && valueElement) { + if (textElement && valueElement) { const valueRect = valueElement.getBoundingClientRect(); - const textRect = optionTextElement.getBoundingClientRect(); - - const triggerXDiff = valueRect.left - triggerX; - const popupXDiff = textRect.left - positionerRect.left; - - offsetX = triggerXDiff - popupXDiff; - offsetY = optionTextElement.offsetTop - (valueRect.top - triggerRect.top); + const textRect = textElement.getBoundingClientRect(); + const valueLeftFromTriggerLeft = valueRect.left - triggerX; + const textLeftFromPositionerLeft = textRect.left - positionerRect.left; + const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2; + const textCenterFromTriggerTop = textRect.top - positionerRect.top + textRect.height / 2; + + offsetX = valueLeftFromTriggerLeft - textLeftFromPositionerLeft; + offsetY = textCenterFromTriggerTop - valueCenterFromPositionerTop; } const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;