-
-
Notifications
You must be signed in to change notification settings - Fork 234
Open
Description
Summary
Rendering components like Tag, Icon, or Tooltip (from @lobehub/ui) inside Select's optionRender causes a "Maximum update depth exceeded" crash. The infinite loop originates from forkRef.cleanup → dispatchSetState → re-render cycle in @base-ui/react@1.0.0.
Reproduction
import { Select } from '@lobehub/ui/base-ui';
import { Tag, Icon } from '@lobehub/ui';
import { Wrench } from 'lucide-react';
<Select
options={[{ label: 'Model A', value: 'a' }]}
optionRender={(option) => (
<div>
{option.label}
{/* Adding Tag/Icon here triggers the crash */}
<Tag color="info" size="small">
<Icon icon={Wrench} />
</Tag>
</div>
)}
/>Clicking the Select to open the dropdown triggers:
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
at forkRef.cleanup
at dispatchSetState
...
Root Cause
@base-ui/react@1.0.0 has known loop bugs in Select's popup rendering. The CHANGELOG shows multiple related fixes in later versions:
- v1.1.0 — Dialog: Fix
Maximum update depth exceedederror with Suspense (#3700) - v1.2.0 — Field: Fix max update depth loop (#3931)
- v1.2.0 — Select: Fix scroll height loop (#3795)
Suggested Fix
Upgrade @base-ui/react from 1.0.0 to 1.2.0. The Select scroll height loop fix (#3795) and general ref management improvements should resolve this.
Current Workaround
In lobe-chat, we avoid rendering complex components inside optionRender by setting showInfoTag={false}:
Environment
@lobehub/ui: 5.4.0@base-ui/react: 1.0.0 (bundled in@lobehub/ui)- React: 19.2.x
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels