[BUG] Chat组件Uncaught runtime errors:ResizeObserver

[algfwq]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

Chat

Semi Version

2.63.1

Current Behavior

运行官网的演示代码，出现的报错：
Uncaught runtime errors:
×
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (http://localhost:3000/static/js/bundle.js:199272:58)
at http://localhost:3000/static/js/bundle.js:199291:7

Expected Behavior

不显示该报错

Steps To Reproduce

运行官网演示代码

ReproducibleCode

No response

Environment

- OS:Windows11 24H2
- browser:Edge 127.0.2651.74

Anything else?

[eslint]
src\Chat.js
Line 2:16: 'Radio' is defined but never used no-unused-vars
Line 75:28: React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies? react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
src\Chat.js
Line 2:16: 'Radio' is defined but never used no-unused-vars
Line 75:28: React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies? react-hooks/exhaustive-deps

webpack compiled with 1 warning

[YyumeiZhang]

我这边官网没有复现你的问题。给个 codesandbox 复现示例？录屏看看详细复现路径

[algfwq]

我这边官网没有复现你的问题。给个 codesandbox 复现示例？录屏看看详细复现路径

代码仓库：https://github.com/algfwq/Semi_worry
Codesandbox：https://codesandbox.io/p/github/algfwq/Semi_worry/master?import=true

[algfwq]

我这边官网没有复现你的问题。给个 codesandbox 复现示例？录屏看看详细复现路径

录屏链接：https://www.123pan.com/s/KIfoTd-3LQ0d.html

[algfwq]

我这边官网没有复现你的问题。给个 codesandbox 复现示例？录屏看看详细复现路径

请尝试拨动选项卡

[Feyily]

+1，我也遇到了这个问题
react版本：18.3.12
semi版本：2.72.1

[fnknzzz]

如果 chrome 没有复现可以试试 safari，safari 可以稳定复现

[YyumeiZhang]

问题原因：
Chat 组件的输入部分使用了 TextArea 组件（设置了 autosize） 属性， 因此有上面的 ResizeObserver loop completed with undelivered notifications 的报错。

因此最小的复现案例是使用 create-react-app 生成的 webpack 项目中，使用 autoSize API 的 TextArea

import React from 'react';
import { TextArea } from '@douyinfe/semi-ui';

() => (
    <div>
        <TextArea autosize={{ minRows: 1, maxRows: 3}} />
    </div>
);

使用了 autosize 属性的 TextArea 中有用到 ResizeObserver 监听
https://github.com/DouyinFE/semi-design/blob/v2.72.0/packages/semi-ui/input/textarea.tsx#L319
value 变化时候，会计算实际的高度 https://github.com/DouyinFE/semi-design/blob/v2.72.0/packages/semi-ui/input/textarea.tsx#L144

高度变化时候，会触发 ResizeObserver 的 onResize 调用，调用的函数链中有 https://github.com/DouyinFE/semi-design/blob/v2.72.0/packages/semi-foundation/input/textareaFoundation.ts#L197 语句，导致在开发中报错ResizeObserver loop completed with undelivered notifications。

问题的影响范围
该问题仅会在开发环境下报错，在线上环境中不会出错。

是否需要修改？
不需要修改，ResizeObserver 中监听容器变化，计算合适的高度是必要的逻辑，此处的计算不会带来不符合预期的结果。
其他的一些参考
https://stackoverflow.com/questions/76187282/react-resizeobserver-loop-completed-with-undelivered-notifications
https://stackoverflow.com/questions/75774800/how-to-stop-resizeobserver-loop-limit-exceeded-error-from-appearing-in-react-a/76107850#76107850