Forms: Multiple 'choice' blocks on a form breaks option block

[edanzer]

Impacted plugin

Jetpack

Quick summary

Summary

This only issue only occurs when working with the forms refactor branch here:
#42890

Quick summary: If you add one single or multiple choice field to a form, it works as expected. If you add a second such field, then the individual options in the first block will break with the 'block has encountered and unexpected error' message. In the console you'll get

Uncaught TypeError: Cannot read properties of undefined (reading 'clientId')
    at use-sync-style-attributes.js:108:43

...

react-dom.js?ver=18.3.1.1:18714 The above error occurred in the <OptionEdit> component:

    at OptionEdit (https://erick2.jurassic.tube/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-forms/dist/blocks/editor.js?minify=false&ver=cb97ffe1670f33798d2c:16591:3)

Here's a screenshot:

Investigation

I did some debugging.

• The issue originate on this line.
• const innerFieldBlocks = blockEditor.getBlocks( field.clientId ) returns an empty array.
• It appears to be a timing issue. When you first add, say a multiple choice field, to a page that already has another multiple/single choice field, the first choice field calls the hook above. That hook iterates through fields and gets innerFieldBlocks, but it's going so fast that for the new multiple choice field that was just added, it initially gets an empty array for innerFieldBlocks.
• Because innerFieldBlocks is an empty array, optionsBlock here is undefined and thus optionsBlock.clientId errors out here.

Steps to reproduce

• Load the refactor branch above
• Add a form to page or post
• Add a single or multiple choice field
• Add a second single or multiple choice field to the same form

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Minor

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

No work around, but impact is minor because the affected branch is not yet released.

Platform (Simple and/or Atomic)

No response

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Editor Experience: This issue relates to how blocks are managed within the Gutenberg editor, particularly the interaction between choice fields.
• [Feature] Forms Blocks: The problem specifically affects the forms functionality, particularly multiple choice fields within form blocks.
• [Feature] Jetpack: The issue is tied to the Jetpack plugin, which is mentioned as impacted in the issue.

[talldan]

This only issue only occurs when working with the forms refactor branch here: #42890

The style syncing code has been rewritten on that branch now (there was another issue similar to this), so it might be worth retesting. Hopefully the error no longer occurs.