fix: remove useRef in menu & tooltip (#4369)

apps/core/src/components/affine/create-workspace-modal/index.tsx

@@ -11,7 +11,7 @@ import type {
 } from '@toeverything/infra/type';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useLayoutEffect } from 'react';
 import { useCallback, useState } from 'react';
 
@@ -122,7 +122,6 @@ const SetDBLocationContent = ({
   onConfirmLocation,
 }: SetDBLocationContentProps) => {
   const t = useAFFiNEI18N();
-  const ref = useRef(null);
   const defaultDBLocation = useDefaultDBLocation();
   const [opening, setOpening] = useState(false);
 
@@ -164,9 +163,6 @@ const SetDBLocationContent = ({
           content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
             location: defaultDBLocation,
           })}
-          portalOptions={{
-            container: ref.current,
-          }}
         >
           <Button
             data-testid="create-workspace-default-location-button"
@@ -176,7 +172,6 @@ const SetDBLocationContent = ({
             }}
             icon={<HelpIcon />}
             iconPosition="end"
-            ref={ref}
           >
             {t['com.affine.setDBLocation.button.defaultLocation']()}
           </Button>

apps/core/src/components/affine/language-menu/index.tsx

@@ -2,7 +2,7 @@ import { LOCALES } from '@affine/i18n';
 import { useI18N } from '@affine/i18n';
 import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import type { ReactElement } from 'react';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 
 // Fixme: keyboard focus should be supported by Menu component
 const LanguageMenuContent = ({
@@ -32,7 +32,6 @@ const LanguageMenuContent = ({
 
 export const LanguageMenu = () => {
   const i18n = useI18N();
-  const ref = useRef(null);
   const currentLanguage = useMemo(
     () => LOCALES.find(item => item.tag === i18n.language),
     [i18n.language]
@@ -53,9 +52,6 @@ export const LanguageMenu = () => {
           />
         ) as ReactElement
       }
-      portalOptions={{
-        container: ref.current,
-      }}
       contentOptions={{
         style: {
           background: 'var(--affine-white)',
@@ -64,7 +60,6 @@ export const LanguageMenu = () => {
       }}
     >
       <MenuTrigger
-        ref={ref}
         data-testid="language-menu-button"
         style={{ textTransform: 'capitalize', fontWeight: 600 }}
         block={true}

apps/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx

@@ -1,6 +1,6 @@
 import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import dayjs from 'dayjs';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import {
   dateFormatOptions,
@@ -35,7 +35,6 @@ const DateFormatMenuContent = ({
 };
 
 export const DateFormatSetting = () => {
-  const ref = useRef(null);
   const [appearanceSettings, setAppSettings] = useAppSetting();
   const handleSelect = useCallback(
     (option: DateFormats) => {
@@ -52,9 +51,8 @@ export const DateFormatSetting = () => {
           currentOption={appearanceSettings.dateFormat}
         />
       }
-      portalOptions={{ container: ref.current }}
     >
-      <MenuTrigger ref={ref} data-testid="date-format-menu-trigger" block>
+      <MenuTrigger data-testid="date-format-menu-trigger" block>
         {dayjs(new Date()).format(appearanceSettings.dateFormat)}
       </MenuTrigger>
     </Menu>

apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -14,13 +14,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai/react';
-import {
-  type ReactElement,
-  Suspense,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
+import { type ReactElement, Suspense, useCallback, useMemo } from 'react';
 
 import { authAtom } from '../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
@@ -225,7 +219,6 @@ const WorkspaceListItem = ({
   const workspace = useStaticBlockSuiteWorkspace(meta.id);
   const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
   const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
-  const ref = useRef(null);
 
   return (
     <div
@@ -233,7 +226,6 @@ const WorkspaceListItem = ({
       title={workspaceName}
       onClick={onClick}
       data-testid="workspace-list-item"
-      ref={ref}
     >
       <Avatar
         size={14}
@@ -246,13 +238,7 @@ const WorkspaceListItem = ({
       />
       <span className="setting-name">{workspaceName}</span>
       {isCurrent ? (
-        <Tooltip
-          content="Current"
-          side="top"
-          portalOptions={{
-            container: ref.current,
-          }}
-        >
+        <Tooltip content="Current" side="top">
           <div
             className={currentWorkspaceLabel}
             data-testid="current-workspace-label"