Summary

Fixes #7465 - Repeatable WYSIWYG fields become uneditable after WordPress content import, causing React error #185 ("Maximum update depth exceeded").

Problem Analysis

🔴 The Bug

When editing a post with repeatable WYSIWYG fields (using Quill editor) that were imported via WordPress XML Import, the fields become completely uneditable and the browser console shows:

Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185

This error means "Maximum update depth exceeded" - an infinite re-render loop in React.

🔍 Root Cause

The issue is in ui/js/dfv/src/fields/wysiwyg/index.js where ReactQuill's onChange handler directly calls setValue:

// ❌ BEFORE - Causes infinite loop
<ReactQuill
  value={ value || '' }
  onChange={ setValue }  // Problem here!
  ...
/>

Why this causes an infinite loop:

1. ReactQuill mounts with imported HTML content → fires onChange(content, delta, source)
2. setValue(content) is called → updates React state
3. Component re-renders with the "new" value (same content, but React sees it as changed)
4. ReactQuill detects value prop change → fires onChange again
5. Loop continues indefinitely → React Error get_* for Pods item for meta-based types #185

The source parameter in ReactQuill's onChange tells us why the change happened:

• 'user' = User typed/edited content
• 'api' = Programmatic change (like setting initial value)
• 'silent' = Internal change that shouldn't trigger events

✅ The Fix

Only call setValue when the change was initiated by the user:

// ✅ AFTER - No infinite loop
<ReactQuill
  value={ value || '' }
  onChange={ ( content, delta, source ) => {
    // Only update state for user-initiated changes
    // to prevent infinite loops on mount/programmatic updates
    if ( source === 'user' ) {
      setValue( content );
    }
  } }
  ...
/>

This is the recommended approach from react-quill documentation.

Code Changes

Before/After Diff

 <ReactQuill
   value={ value || '' }
   onBlur={ () => setHasBlurred() }
-  onChange={ setValue }
+  onChange={ ( content, delta, source ) => {
+    // Only update state for user-initiated changes
+    // to prevent infinite loops on mount/programmatic updates
+    if ( source === 'user' ) {
+      setValue( content );
+    }
+  } }
   theme="snow"
   modules={ { toolbar: QUILL_TOOLBAR_OPTIONS } }
   readOnly={ toBool( readOnly ) }
 />

Files Changed

Testing

Automated Tests

• ✅ All 42 Jest tests pass
• ✅ Production build compiles successfully

Manual Testing

• ✅ Imported the reporter's Pod configuration and WordPress XML export
• ✅ Verified repeatable WYSIWYG fields are now editable
• ✅ No React errors in browser console
• ✅ Content saves and persists correctly

How to Test

1. Install this patched plugin zip
2. Import the Pod configuration from the issue
3. Import the WordPress XML export from the issue
4. Edit the imported "tuote" post type items
5. Verify WYSIWYG fields are editable with no console errors

Screenshots

Before:

After:

Related

• Issue: Pods custom fields not editable when editing a custom post with repeatable WYSIWYG fields #7465
• React Error Reference: https://reactjs.org/docs/error-decoder.html?invariant=185
• react-quill Controlled Mode: https://github.com/zenoamaro/react-quill#controlled-mode-caveats