[Bug] Data Validation "list" type causes Runtime Error ResizeObserver

[Erivess]

Before you submit this issue, have you checked the following

• [X] Is this really a problem?
• [X] I have searched the Github Issues for similar issues, but did not find anything.

Affected packages and versions

"@univerjs/data-validation": "^0.4.2",     "@univerjs/sheets-data-validation": "^0.4.2",     "@univerjs/sheets-data-validation-ui": "^0.4.2",

Reproduction link

Dev.jam: https://jam.dev/c/120fc878-3cf9-403e-ae9a-63879eb561a0 The reprooduction demo and template do not use "@univerjs/data-validation": "^0.4.2", "@univerjs/sheets-data-validation": "^0.4.2", "@univerjs/sheets-data-validation-ui": "^0.4.2",

Expected behavior

Opening the dropdown list and seeing the dropdown options.

Actual behavior

When opening the dropdown list I am getting runtime errors "ResizeObserver". I checked the other types, but this issue only occurs when using the list type.

// This file initializes the Univer instance and Plugin Setup

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula-ui/lib/index.css";
import '@univerjs/sheets-data-validation-ui/lib/index.css';

import {
  Univer,
  LocaleType,
  UniverInstanceType,
  IWorkbookData,
  BooleanNumber,
  Tools
} from '@univerjs/core';
import { defaultTheme } from '@univerjs/design';
import { UniverSheetsPlugin } from '@univerjs/sheets';
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
import { UniverUIPlugin } from '@univerjs/ui';
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui';
import { UniverDocsPlugin } from '@univerjs/docs';
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
import { UniverDataValidationPlugin } from '@univerjs/data-validation';
import { UniverSheetsDataValidationPlugin } from '@univerjs/sheets-data-validation';
import { UniverSheetsDataValidationUIPlugin } from '@univerjs/sheets-data-validation-ui';
import SheetsDataValidationEnUS from '@univerjs/sheets-data-validation-ui/lib/locale/en-US.json';

interface InitializeUniverOptions {
  container: HTMLDivElement;
  showHeader?: boolean;
  showFooter?: boolean;
  workbookData?: IWorkbookData;
}

export const initializeUniver = async ({
  container,
  showHeader = true,
  showFooter = true,
  workbookData = getDefaultWorkbookData(),
}: InitializeUniverOptions): Promise<Univer> => {
  try {
    const univer = new Univer({
      theme: defaultTheme,
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: Tools.deepMerge(
          SheetsDataValidationEnUS
        ),
      },
    });

    // 1. Core Engine Plugins
    univer.registerPlugin(UniverRenderEnginePlugin);
    univer.registerPlugin(UniverFormulaEnginePlugin);

    // 2. UI Plugin
    univer.registerPlugin(UniverUIPlugin, {
      container,
      header: showHeader,
      footer: showFooter,
    });

    // 3. Core Feature Plugins
    univer.registerPlugin(UniverDocsPlugin);
    univer.registerPlugin(UniverSheetsPlugin);
    univer.registerPlugin(UniverSheetsFormulaPlugin);

    // 4. UI Feature Plugins
    univer.registerPlugin(UniverDocsUIPlugin);
    univer.registerPlugin(UniverSheetsUIPlugin);
    univer.registerPlugin(UniverSheetsFormulaUIPlugin);
    univer.registerPlugin(UniverDataValidationPlugin); 
    univer.registerPlugin(UniverSheetsDataValidationPlugin);
    univer.registerPlugin(UniverSheetsDataValidationUIPlugin, {
      // Whether to show the edit button in the dropdown menu
      showEditOnDropdown: false
    });

    await univer.createUnit(UniverInstanceType.UNIVER_SHEET, workbookData);

    return univer;
  } catch (error) {
    console.error('Error initializing Univer:', error);
    throw error;
  }
};

export const getDefaultWorkbookData = (): IWorkbookData => ({
  id: 'workbook_1',
  appVersion: '3.0.0-alpha',
  locale: LocaleType.EN_US,
  sheets: {
    sheet_1: {
      id: 'sheet_1',
      name: 'Sheet1',
      cellData: {
        '0': {  // Row 0
          '0': { v: 'Product' },
          '1': { v: 'Category' },
          '2': { v: 'Price' },
          '5': { v: 'Status' },
        },
        '1': {  // Row 1
          '0': { v: 'Laptop' },
          '1': { v: 'Electronics' },
          '2': { v: 999.99 },

        },
        '2': {  // Row 2
          '0': { v: 'Coffee Maker' },
          '1': { v: 'Appliances' },
          '2': { v: 79.99 },
          '3': { v: 'Merged Cells Example' },
        },
        '3': {  // Row 3
          '0': { v: 'Desk Chair' },
          '1': { v: 'Furniture' },
          '2': { v: 199.99 },
        }
      },
      rowCount: 1000,
      columnCount: 26,
      defaultRowHeight: 25,
      defaultColumnWidth: 100,
      showGridlines: BooleanNumber.TRUE,
      zoomRatio: 1,
      mergeData: [
        {
          startRow: 2,
          endRow: 3,
          startColumn: 3,
          endColumn: 4,
        }
      ]
    },
  },
  name: 'Workbook1',
  sheetOrder: ['sheet_1'],
  styles: {},
  resources: [
    {
      name: "SHEET_DATA_VALIDATION_PLUGIN",
      data: JSON.stringify({
        "sheet_1": [
          {
            uid: "dv-1",
            type: "list",
            ranges: [
              {
                startRow: 1,
                endRow: 3,
                startColumn: 5,
                endColumn: 5,
                rangeType: 0
              }
            ],
            formula1: "Yes,No",

          }
        ]
      })
    }
  ]
});

[weird94]

try this: https://sentry.io/answers/react-resizeobserver-loop-completed-with-undelivered-notifications/#understanding-the-resizeobserver-loop-limit-exceeded-error-message

[Erivess]

@weird94 I tried the workaround 1+2 from the link, but they didnt work - i switched now from create react app to vite and now the error is gone. Thanks for your prompt reply.