[Select] Fix vertical text align (#967)

mui · Dec 5, 2024 · de3622e · de3622e
1 parent b64e1dd
commit de3622e
Showing 1 changed file with 10 additions and 9 deletions.
diff --git 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;