[6.x] Tooltip breaks edit page: Maximum recursive updates exceeded when editing entries with many nested replicator sets

[jonathan-bird]

Bug description

When editing an entry with a large number of nested replicator sets in the Control Panel, the following Vue error appears repeatedly:

Maximum recursive updates exceeded in component. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself.

The recursive update error triggers, likely due to the large number of v-tooltip directives being rendered simultaneously.

This makes the entry impossible to save. Save & Publish just is grayed out, console is full of errors and spinning icon at top right.

And about 95 of these:

Uncaught (in promise) Maximum recursive updates exceeded in component <VTooltipDirectiveApp>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

This appears related to a known issue with floating-vue when too many tooltip directives are on a single page:

• Too many v-tooltips in one page causes a recursive error Akryum/floating-vue#1051
• "Maximum recursive updates exceeded" message with Vue > 3.4.14 vuejs/core#10510

The entry causing issues has 21 nested replicator sets (wheel specifications), each containing 5-6 fields with instructions. Other entries with fewer sets (4-10) work fine.

Possible solutions:

• Lazy-load tooltips only when hovering
• Virtualize the replicator list for large datasets
• Update floating-vue if a fix is available

How to reproduce

1. Create an entry with a deeply nested replicator structure (e.g., 20+ sets) - not sure of the exact maximum before it appears but my page has quite a lot of replicators so might be 50+
2. Each set contains multiple fields with instructions (which render tooltip icons)
3. Try to edit fields within the replicator (e.g., an assets field)
4. The error appears in the browser console and the CP becomes unresponsive

Logs

Environment

Environment
Application Name: xxxx
Laravel Version: 12.47.0
PHP Version: 8.4.15
Composer Version: 2.9.1
Environment: local
Debug Mode: ENABLED
URL: roh.test
Maintenance Mode: OFF
Timezone: Australia/Adelaide
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: redis
Database: mysql
Logs: stack / daily
Mail: smtp
Queue: sync
Session: redis

Storage
public/storage: NOT LINKED

Livewire
Livewire: v4.0.1

Statamic
Addons: 3
Sites: 2 (Australia, New Zealand)
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.0.0-beta.3 PRO

Statamic Addons
marcorieser/statamic-livewire: 5.2.0
mitydigital/sitemapamic: 3.4.1
statamic/seo-pro: 7.0.0-beta.7

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[duncanmcclean]

I don't suppose you'd be able to share access to the repo? It'd make debugging the issue much easier.

[jonathan-bird]

I can share the blueprint and content files privately if that works? Should be enough to replicate it. Or I can try to spin up a fresh repo to replicate.

[duncanmcclean]

Yeah, either will work. 🙂

You can send any files to support@statamic.com.

[jonathan-bird]

Sent! Thanks @duncanmcclean :)