Forms Block: Cannot add more than two entries to Dropdown Field

[sajmes]

Impacted plugin

Jetpack

Quick summary

On a WordPress.com simple and Atomic site, I'm unable to add more than 2 fields to the dropdown field.

Screen.Capture.on.2024-05-24.at.17-21-04.mp4

Steps to reproduce

Add a Form Block.
Add a Dropdown Field.
Attempt to add additional entries to dropdown using keyboard shortcuts or editor buttons.

A clear and concise description of what you expected to happen.

I expected to be able to add more than 2 options, either with a clickable option in the editor or using enter on the keyboard.

What actually happened

After the second option is created, I cannot add further options.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

No response

[jeherve]

cc @monsieur-z ; could this be linked to some of your recent a11y improvements?

[monsieur-z]

I tested with a Simple site on WordPress.com and couldn't reproduce the issue. After adding a Dropdown field to a Contact Form, I get the following UI:

I can focus on the Add option... input and type. Hitting the Return key allows me to enter another option, which I can do as many times as I need.

[CodeAllNightNDay]

I can reproduce this on a simple site. My test site is using Twenty Twenty-Two. Hitting return isn't giving me any more fields.

[jeherve]

@CodeAllNightNDay Could you specify what browser you're using? This may play a role here.

[monsieur-z]

@CodeAllNightNDay Could you specify what browser you're using? This may play a role here.

And any errors you might see in the developer console.

[sajmes]

Chrome 125.0.6422.113 for me. No errors that look related in the console.

[CodeAllNightNDay]

@jeherve @monsieur-z I was on Chrome, but I don't see any console errors related to the issue.

[monsieur-z]

I've been able to reproduce the issue after pulling the latest trunk branch in my sandbox, which suggests it was introduced fairly recently. We haven't worked on the Contact Form lately, so no reason jumps to mind.

It'll need more investigation.

[sajmes]

Adding the original user report so we can update them once fixed: 8225210-zd-a8c

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8225210-zen
• 8258548-zen
• 8265714-zen
• 8299157-zen

[monsieur-z]

I could reproduce the issue on my local test site (I couldn't with a brand new self-hosted site with Jetpack, though). After downgrading Jetpack several versions, the issue still occurs. I've got a hunch this is due to a WordPress update.

Also, I'm seeing this warning in the console:
wp.blockEditor.RichText onSplit prop is deprecated since version 6.4. Please use block.json support key: "splitting" instead.

However, updating the block.json doesn't seem to do anything for me.

[supernovia]

I've got this on a test site. I can only add one option, using Chrome, and while I can change it I can't do anything else. A user in this ticket also cannot edit options on their site. 8258548-zd-a8c

[supernovia]

FWIW: I suggested a user try radio buttons instead. Those don't easily add with pressing enter, but since they work as individual blocks, I can "duplicate" them from list view.

[rosepajaroja]

Encountered a similar issue here:

8265714-zen

I found a workaround using "Ask AI Assistant". Here's the short video I shared with the user:

CleanShot.2024-06-01.at.17.04.52.mp4

[nazilya06]

The user reported this issue here: 8299157-zd-a8c

I found a workaround: to press Shift-Enter to add another option, it worked for me.

[monsieur-z]

The issue was caused by an update to the Gutenberg codebase released in 18.4. This PR explains the issue in more detail and fixes it in Jetpack.

The fix will be available to self-hosted sites in about a month, though. Does it warrant a patch version? cc. @jeherve

[jeherve]

I added the PR to the 13.5.1 milestone. If more issues pop up with 13.5, I think we should consider releasing a point release including this fix.