@nocobase/client-v2 2.3.0-beta.2 → 2.3.0-beta.21

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -10,7 +10,9 @@
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import jsQR from 'jsqr';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
 import type { CodeFormatsToSupport } from './types';
+import { decodeQrCodeWithZxingWasm } from './zxingWasmDecoder';
 
 type ScannerSize = {
   width: number;
@@ -22,6 +24,7 @@ type UseCodeScannerOptions = {
   elementId: string;
   formatsToSupport?: CodeFormatsToSupport;
   onScannerSizeChanged?: (size: ScannerSize) => void;
+  scanViewportRef?: RefObject<HTMLElement | null>;
   onScanSuccess: (text: string) => void;
   onScanFailure?: () => void;
   onCameraStartFailure?: (error: unknown) => void;
@@ -37,6 +40,12 @@ type JsQRImageTransform = {
   threshold?: number;
 };
 
+type QrFrameCaptureLimits = {
+  maxHeight: number;
+  maxPixels: number;
+  maxWidth: number;
+};
+
 type FocusMediaTrackCapabilities = MediaTrackCapabilities & {
   focusMode?: string[];
 };
@@ -47,8 +56,15 @@ type FocusMediaTrackConstraintSet = MediaTrackConstraintSet & {
 
 const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
 const LIVE_QR_SCAN_INTERVAL = 120;
+const IOS_ZXING_SCAN_INTERVAL = 200;
 const LIVE_QR_SCAN_MAX_WIDTH = 960;
 const LIVE_QR_SCAN_MAX_HEIGHT = 540;
+const LIVE_QR_SCAN_MAX_PIXELS = LIVE_QR_SCAN_MAX_WIDTH * 420;
+const IOS_ZXING_SCAN_LIMITS: QrFrameCaptureLimits = {
+  maxHeight: 720,
+  maxPixels: 720 * 960,
+  maxWidth: 1280,
+};
 const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
   {},
   { contrast: 3, threshold: 105 },
@@ -81,7 +97,49 @@ export function getCodeScanBoxSize(width: number, height: number) {
   };
 }
 
-export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
+export function isIOSBrowser() {
+  return (
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+  );
+}
+
+function getVisibleVideoFrameRegion(video: HTMLVideoElement, scanViewport: Element) {
+  const rect = video.getBoundingClientRect();
+  const viewportRect = scanViewport.getBoundingClientRect();
+  const visibleLeft = Math.max(viewportRect.left, rect.left);
+  const visibleTop = Math.max(viewportRect.top, rect.top);
+  const visibleRight = Math.min(viewportRect.right, rect.right);
+  const visibleBottom = Math.min(viewportRect.bottom, rect.bottom);
+  if (!rect.width || !rect.height || visibleRight <= visibleLeft || visibleBottom <= visibleTop) {
+    return;
+  }
+
+  const sourceX = Math.max(0, Math.floor(((visibleLeft - rect.left) / rect.width) * video.videoWidth));
+  const sourceY = Math.max(0, Math.floor(((visibleTop - rect.top) / rect.height) * video.videoHeight));
+  return {
+    x: sourceX,
+    y: sourceY,
+    width: Math.min(
+      video.videoWidth - sourceX,
+      Math.ceil(((visibleRight - visibleLeft) / rect.width) * video.videoWidth),
+    ),
+    height: Math.min(
+      video.videoHeight - sourceY,
+      Math.ceil(((visibleBottom - visibleTop) / rect.height) * video.videoHeight),
+    ),
+  };
+}
+
+export function getQrVideoFrameImageData(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport?: Element,
+  limits: QrFrameCaptureLimits = {
+    maxHeight: LIVE_QR_SCAN_MAX_HEIGHT,
+    maxPixels: LIVE_QR_SCAN_MAX_PIXELS,
+    maxWidth: LIVE_QR_SCAN_MAX_WIDTH,
+  },
+) {
   if (!video.videoWidth || !video.videoHeight || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
     return;
   }
@@ -89,16 +147,27 @@ export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElem
   const viewfinderWidth = video.clientWidth || video.videoWidth;
   const viewfinderHeight = video.clientHeight || video.videoHeight;
   const scanBoxSize = getCodeScanBoxSize(viewfinderWidth, viewfinderHeight);
-  const sourceWidth = Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth)));
-  const sourceHeight = Math.min(
-    video.videoHeight,
-    Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight)),
-  );
-  const sourceX = Math.floor((video.videoWidth - sourceWidth) / 2);
-  const sourceY = Math.floor((video.videoHeight - sourceHeight) / 2);
-  const targetScale = Math.min(1, LIVE_QR_SCAN_MAX_WIDTH / sourceWidth, LIVE_QR_SCAN_MAX_HEIGHT / sourceHeight);
-  const targetWidth = Math.max(1, Math.floor(sourceWidth * targetScale));
-  const targetHeight = Math.max(1, Math.floor(sourceHeight * targetScale));
+  const scanBoxRegion = {
+    width: Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth))),
+    height: Math.min(video.videoHeight, Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight))),
+  };
+  const sourceRegion = scanViewport
+    ? getVisibleVideoFrameRegion(video, scanViewport)
+    : {
+        x: Math.floor((video.videoWidth - scanBoxRegion.width) / 2),
+        y: Math.floor((video.videoHeight - scanBoxRegion.height) / 2),
+        ...scanBoxRegion,
+      };
+  if (!sourceRegion) {
+    return;
+  }
+
+  const maxWidth = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxHeight : limits.maxWidth;
+  const maxHeight = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxWidth : limits.maxHeight;
+  const pixelScale = scanViewport ? Math.sqrt(limits.maxPixels / (sourceRegion.width * sourceRegion.height)) : 1;
+  const targetScale = Math.min(1, maxWidth / sourceRegion.width, maxHeight / sourceRegion.height, pixelScale);
+  const targetWidth = Math.max(1, Math.floor(sourceRegion.width * targetScale));
+  const targetHeight = Math.max(1, Math.floor(sourceRegion.height * targetScale));
   if (canvas.width !== targetWidth) {
     canvas.width = targetWidth;
   }
@@ -110,30 +179,75 @@ export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElem
     return;
   }
 
-  context.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
-  const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
+  context.drawImage(
+    video,
+    sourceRegion.x,
+    sourceRegion.y,
+    sourceRegion.width,
+    sourceRegion.height,
+    0,
+    0,
+    targetWidth,
+    targetHeight,
+  );
+  return context.getImageData(0, 0, targetWidth, targetHeight);
+}
+
+export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement, scanViewport?: Element) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport);
+  if (!imageData) {
+    return;
+  }
   return jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' })?.data;
 }
 
-function startLiveQrScan(elementId: string, onScanSuccess: (text: string) => void) {
+export async function scanQrVideoFrameWithZxingWasm(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport: Element,
+) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport, IOS_ZXING_SCAN_LIMITS);
+  if (!imageData) {
+    return;
+  }
+  return decodeQrCodeWithZxingWasm(imageData);
+}
+
+function startLiveQrScan(
+  elementId: string,
+  onScanSuccess: (text: string) => void,
+  scanViewportRef?: RefObject<HTMLElement | null>,
+) {
   const canvas = document.createElement('canvas');
+  const useVisiblePreview = isIOSBrowser();
   let timer: number | undefined;
   let stopped = false;
 
-  const scan = () => {
+  const scan = async () => {
     if (stopped) {
       return;
     }
     const video = document.getElementById(elementId)?.querySelector('video');
+    const scanViewport = useVisiblePreview ? scanViewportRef?.current : undefined;
     if (video) {
-      const decodedText = scanQrVideoFrame(video, canvas);
-      if (decodedText) {
+      let decodedText: string | undefined;
+      try {
+        decodedText =
+          useVisiblePreview && scanViewport
+            ? await scanQrVideoFrameWithZxingWasm(video, canvas, scanViewport)
+            : scanQrVideoFrame(video, canvas);
+      } catch {
+        // Keep the existing scanners active when the optional WASM decoder cannot load or decode a frame.
+      }
+      if (decodedText && !stopped) {
         stopped = true;
         onScanSuccess(decodedText);
         return;
       }
     }
-    timer = window.setTimeout(scan, LIVE_QR_SCAN_INTERVAL);
+    if (!stopped) {
+      timer = window.setTimeout(scan, useVisiblePreview ? IOS_ZXING_SCAN_INTERVAL : LIVE_QR_SCAN_INTERVAL);
+    }
   };
 
   timer = window.setTimeout(scan, 0);
@@ -304,6 +418,7 @@ export function useCodeScanner({
   elementId,
   formatsToSupport,
   onScannerSizeChanged,
+  scanViewportRef,
   onScanSuccess,
   onScanFailure,
   onCameraStartFailure,
@@ -377,11 +492,11 @@ export function useCodeScanner({
         return;
       }
       if (shouldScanQrWithJsQR(formatsToSupport)) {
-        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess);
+        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess, scanViewportRef);
       }
       await enableContinuousFocus(scannerInstance);
     },
-    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess],
+    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess, scanViewportRef],
   );
 
   const startScanFile = useCallback(

package/src/components/form/ScanInput/zxingWasmDecoder.ts

@@ -0,0 +1,64 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+let decoderPromise: Promise<typeof import('zxing-wasm/reader')> | undefined;
+
+async function loadDecoder() {
+  if (!decoderPromise) {
+    decoderPromise = Promise.all([import('zxing-wasm/reader'), import('zxing-wasm/reader/zxing_reader.wasm')])
+      .then(async ([decoder, { default: wasmUrl }]) => {
+        try {
+          await decoder.prepareZXingModule({
+            fireImmediately: true,
+            overrides: { locateFile: () => wasmUrl },
+          });
+        } catch (error) {
+          decoder.purgeZXingModule();
+          throw error;
+        }
+        return decoder;
+      })
+      .catch((error: unknown) => {
+        decoderPromise = undefined;
+        throw error;
+      });
+  }
+  return decoderPromise;
+}
+
+export async function decodeQrCodeWithZxingWasm(imageData: ImageData) {
+  const decoder = await loadDecoder();
+  const results = await decoder.readBarcodes(imageData, {
+    binarizer: 'GlobalHistogram',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+  if (results[0]?.text) {
+    return results[0].text;
+  }
+
+  const fallbackResults = await decoder.readBarcodes(imageData, {
+    binarizer: 'LocalAverage',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+  return fallbackResults[0]?.text;
+}

package/src/flow/actions/__tests__/validation.test.ts

@@ -0,0 +1,48 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { validation } from '../validation';
+
+vi.mock('../../../flow-compat', () => ({ FieldValidation: () => null }));
+
+describe('validation action', () => {
+  it('rejects excess decimal places with a translated error and retains collection rules', async () => {
+    const setProps = vi.fn();
+    const collectionRule = { validator: vi.fn().mockResolvedValue(undefined) };
+    const t = vi.fn((key: string, options?: Record<string, unknown>) => {
+      return `${options?.label} 精度不能超过 ${options?.limit} 位小数`;
+    });
+    const ctx = {
+      model: {
+        props: { label: '工龄' },
+        collectionField: { getComponentProps: () => ({ rules: [collectionRule] }) },
+        setProps,
+      },
+      t,
+    } as unknown as Parameters<typeof validation.handler>[0];
+
+    await validation.handler(ctx, {
+      validation: { type: 'number', rules: [{ name: 'precision', args: { limit: 2 } }] },
+    });
+
+    const { rules } = setProps.mock.calls[0][0] as {
+      rules: { validator: (rule: unknown, value: unknown) => Promise<void> }[];
+    };
+    expect(rules).toHaveLength(2);
+    expect(rules[0]).toBe(collectionRule);
+    await expect(rules[1].validator({}, 39.2234)).rejects.toBe('工龄 精度不能超过 2 位小数');
+    expect(t).toHaveBeenCalledWith(
+      'number.precision',
+      expect.objectContaining({ ns: 'data-source-main', label: '工龄', limit: 2 }),
+    );
+    await expect(rules[1].validator({}, 39.22)).resolves.toBeUndefined();
+    await expect(rules[1].validator({}, null)).resolves.toBeUndefined();
+  });
+});

package/src/flow/admin-shell/admin-layout/MobileTopbarActionsContext.ts

@@ -0,0 +1,13 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { createContext } from 'react';
+
+// Internal callback for dismissing the mobile topbar after a nested menu action completes.
+export const MobileTopbarActionsContext = createContext<(() => void) | undefined>(undefined);

package/src/flow/admin-shell/admin-layout/TopbarActionsBar.tsx

@@ -11,13 +11,14 @@ import { EllipsisOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { FlowModelRenderer } from '@nocobase/flow-engine';
 import { ConfigProvider, Divider, Popover, theme } from 'antd';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useAclSnippets } from '../../../acl/useAclSnippets';
 import type { CustomToken } from '../../../theme';
 import { TopbarActionModel } from '../../models/topbar/TopbarActionModel';
 import { USER_CENTER_ACTION_ID } from '../../models/topbar/UserCenterTopbarActionModel';
 import { HelpLite } from './HelpLite';
+import { MobileTopbarActionsContext } from './MobileTopbarActionsContext';
 
 const topbarActionsBarClassName = css`
   display: inline-flex;
@@ -183,11 +184,21 @@ export const TopbarActionsBar = React.memo((props: { actions: TopbarActionModel[
     setOpen(false);
   }, []);
 
+  useEffect(() => {
+    if (!props.isMobile) {
+      setOpen(false);
+    }
+  }, [props.isMobile]);
+
   if (props.isMobile) {
     return (
       <Popover
         rootClassName={popoverStyle}
-        content={<TopbarActionsContent actions={props.actions} onActionClick={handleContentClick} />}
+        content={
+          <MobileTopbarActionsContext.Provider value={handleContentClick}>
+            <TopbarActionsContent actions={props.actions} onActionClick={handleContentClick} />
+          </MobileTopbarActionsContext.Provider>
+        }
         color={customToken.colorBgHeader}
         trigger="click"
         open={open}

package/src/flow/admin-shell/admin-layout/__tests__/TopbarActionsBar.mobile.test.tsx

@@ -0,0 +1,205 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Drawer, Input } from 'antd';
+import React, { useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@nocobase/flow-engine', () => ({
+  FlowModel: class {
+    uid: string;
+    context = { t: (value: string) => value };
+
+    constructor(options: { uid: string }) {
+      this.uid = options.uid;
+    }
+  },
+  FlowModelRenderer: ({ model }: { model: { render: () => React.ReactNode } }) => model.render(),
+  observer: (component: React.ComponentType) => component,
+}));
+
+vi.mock('../../../models/topbar/TopbarActionModel', async () => {
+  const { FlowModel } = await import('@nocobase/flow-engine');
+  return {
+    TopbarActionModel: class extends FlowModel {
+      isHidden() {
+        return false;
+      }
+
+      getActionId() {
+        return 'user-center';
+      }
+
+      renderWrapper(node: React.ReactNode) {
+        return node;
+      }
+
+      renderButton() {
+        return <button data-testid="user-center-button">User center</button>;
+      }
+    },
+  };
+});
+
+vi.mock('../../../../acl/useAclSnippets', () => ({
+  useAclSnippets: () => ({ allow: () => true }),
+}));
+
+vi.mock('../HelpLite', () => ({ HelpLite: () => null }));
+
+import {
+  UserCenterActionItemModel,
+  UserCenterSelectItemModel,
+  UserCenterTopbarActionModel,
+} from '../../../models/topbar/UserCenterTopbarActionModel';
+import { TopbarActionsBar } from '../TopbarActionsBar';
+
+afterEach(cleanup);
+
+function createUserCenter(onClick: () => Promise<void>, closeOnClick = true) {
+  const item = new UserCenterActionItemModel({ uid: 'test-edit-profile', use: 'UserCenterActionItemModel' });
+  item.label = 'Edit profile';
+  item.onClick = onClick;
+  item.closeOnClick = closeOnClick;
+  const model = new UserCenterTopbarActionModel({ uid: 'test-user-center', use: 'UserCenterTopbarActionModel' });
+  vi.spyOn(model, 'getPreparedItems').mockImplementation(async (closeDropdown) => {
+    item.setCloseDropdown(closeDropdown);
+    return [item];
+  });
+  return model;
+}
+
+async function openUserMenu(isMobile: boolean) {
+  if (isMobile) {
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+  }
+  fireEvent.mouseEnter(screen.getByTestId('user-center-button'));
+  const action = await screen.findByRole('button', { name: 'Edit profile' });
+  await waitFor(() => expect(action).toBeVisible());
+  return action;
+}
+
+describe('mobile user center popover', () => {
+  it('closes both menus after selecting an action and keeps the opened drawer mounted', async () => {
+    const model = createUserCenter(vi.fn());
+    const Test = () => {
+      const [open, setOpen] = useState(false);
+      model.getPreparedItems = async (closeDropdown) => {
+        const item = new UserCenterActionItemModel({ uid: 'profile', use: 'UserCenterActionItemModel' });
+        item.label = 'Edit profile';
+        item.onClick = async () => setOpen(true);
+        item.setCloseDropdown(closeDropdown);
+        return [item];
+      };
+      return (
+        <>
+          <TopbarActionsBar actions={[model]} isMobile />
+          <Drawer open={open} title="Edit profile">
+            <Input aria-label="Nickname" />
+          </Drawer>
+        </>
+      );
+    };
+    render(<Test />);
+
+    fireEvent.click(await openUserMenu(true));
+
+    await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument());
+    expect(screen.getByRole('textbox', { name: 'Nickname' })).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Edit profile' })).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+    fireEvent.mouseEnter(screen.getByTestId('user-center-button'));
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Edit profile' })).toBeVisible());
+  });
+
+  it('respects actions that keep the menu open', async () => {
+    const onClick = vi.fn(async () => {});
+    render(<TopbarActionsBar actions={[createUserCenter(onClick, false)]} isMobile />);
+
+    fireEvent.click(await openUserMenu(true));
+
+    await waitFor(() => expect(onClick).toHaveBeenCalledOnce());
+    expect(screen.getByRole('tooltip')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Edit profile' })).toBeVisible();
+  });
+
+  it('keeps the topbar open when the user only leaves the nested menu', async () => {
+    render(<TopbarActionsBar actions={[createUserCenter(vi.fn())]} isMobile />);
+    const action = await openUserMenu(true);
+
+    const dropdown = action.closest('.ant-dropdown');
+    expect(dropdown).not.toBeNull();
+    if (dropdown) {
+      fireEvent.mouseLeave(dropdown);
+    }
+    fireEvent.mouseLeave(screen.getByTestId('user-center-button'));
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Edit profile' })).not.toBeInTheDocument());
+    expect(screen.getByRole('tooltip')).toBeVisible();
+  });
+
+  it('keeps desktop actions working without a mobile popover', async () => {
+    const onClick = vi.fn(async () => {});
+    render(<TopbarActionsBar actions={[createUserCenter(onClick)]} />);
+
+    fireEvent.click(await openUserMenu(false));
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Edit profile' })).not.toBeInTheDocument());
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(screen.queryByRole('img', { name: 'ellipsis' })).not.toBeInTheDocument();
+  });
+
+  it.each([true, false])('respects closeOnChange=%s for preference selectors', async (closeOnChange) => {
+    const onChange = vi.fn(async () => {});
+    const item = new UserCenterSelectItemModel({ uid: 'language', use: 'UserCenterSelectItemModel' });
+    item.label = 'Language';
+    item.value = 'en';
+    item.options = [
+      { label: 'English', value: 'en' },
+      { label: 'Chinese', value: 'zh' },
+    ];
+    item.onChange = onChange;
+    item.closeOnChange = closeOnChange;
+    const model = createUserCenter(vi.fn());
+    model.getPreparedItems = async (closeDropdown) => {
+      item.setCloseDropdown(closeDropdown);
+      return [item];
+    };
+    render(<TopbarActionsBar actions={[model]} isMobile />);
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+    fireEvent.mouseEnter(screen.getByTestId('user-center-button'));
+    const select = await screen.findByRole('combobox');
+    await waitFor(() => expect(select.closest('.ant-select')).toBeVisible());
+
+    fireEvent.mouseDown(select);
+    fireEvent.click(await screen.findByText('Chinese'));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith('zh'));
+    if (closeOnChange) {
+      await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument());
+    } else {
+      expect(screen.getByRole('tooltip')).toBeVisible();
+      expect(select.closest('.ant-select')).toBeVisible();
+    }
+  });
+
+  it('does not reopen the previous popover after switching to desktop and back', async () => {
+    const actions = [createUserCenter(vi.fn())];
+    const { rerender } = render(<TopbarActionsBar actions={actions} isMobile />);
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeVisible());
+
+    rerender(<TopbarActionsBar actions={actions} isMobile={false} />);
+    rerender(<TopbarActionsBar actions={actions} isMobile />);
+
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+});