From 9a795c8ecd531885728138446bf33892f78fde81 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Wed, 26 Apr 2023 10:19:07 +0800
Subject: [PATCH] fix(console): language dropdown height should be calculated
 properly on first load (#3763)

---
 .../AppContent/components/SubMenu/index.tsx   | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/console/src/containers/AppContent/components/SubMenu/index.tsx b/packages/console/src/containers/AppContent/components/SubMenu/index.tsx
index 359300231..e3b25d3dc 100644
--- a/packages/console/src/containers/AppContent/components/SubMenu/index.tsx
+++ b/packages/console/src/containers/AppContent/components/SubMenu/index.tsx
@@ -1,6 +1,6 @@
 import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import { type ReactNode, useCallback, useEffect, useState, useRef } from 'react';
+import { type ReactNode, useCallback, useState, useRef } from 'react';
 
 import ArrowRight from '@/assets/images/arrow-right.svg';
 import Tick from '@/assets/images/tick.svg';
@@ -26,7 +26,7 @@ type Props<T> = {
 const menuItemHeight = 40;
 const menuItemMargin = 4;
 const menuBorderSize = 1;
-const menuBottomPadding = 16;
+const menuBottomMargin = 16;
 
 function SubMenu<T extends string>({
   className,
@@ -50,24 +50,12 @@ function SubMenu<T extends string>({
         options.length * menuItemHeight +
         (options.length + 1) * menuItemMargin +
         2 * menuBorderSize;
-      const availableHeight = window.innerHeight - anchorRect.top - menuBottomPadding;
+      const availableHeight = window.innerHeight - anchorRect.top - menuBottomMargin;
 
       setMenuHeight(Math.min(originalMenuHeight, availableHeight));
     }
   }, [options.length]);
 
-  useEffect(() => {
-    calculateDropdownHeight();
-
-    window.addEventListener('resize', calculateDropdownHeight);
-    window.addEventListener('scroll', calculateDropdownHeight);
-
-    return () => {
-      window.removeEventListener('resize', calculateDropdownHeight);
-      window.removeEventListener('scroll', calculateDropdownHeight);
-    };
-  }, [calculateDropdownHeight]);
-
   return (
     <div
       ref={anchorRef}
@@ -79,6 +67,7 @@ function SubMenu<T extends string>({
       })}
       onMouseEnter={() => {
         window.clearTimeout(mouseLeaveTimeoutRef.current);
+        calculateDropdownHeight();
         // eslint-disable-next-line @silverhand/fp/no-mutation
         mouseEnterTimeoutRef.current = window.setTimeout(() => {
           setShowMenu(true);