RelatedItemsFieldWidget prevents submit in Chrome

[szakitibi]

A required RelationChoice field using plone.app.z3cform.widgets.relateditems.RelatedItemsFieldWidget prevents ++add++ form submit in Chrome.

To Reproduce

Steps to reproduce the behavior:

1. Go to Classic UI demo site https://classic.demo.plone.org/
2. Login as manager
3. Go to Site Setup and create a new Dexterty Type (e.g. "Test") having no behavior fields only the following XML schema:

<model xmlns:i18n="http://xml.zope.org/namespaces/i18n" xmlns:form="http://namespaces.plone.org/supermodel/form" xmlns:security="http://namespaces.plone.org/supermodel/security" xmlns:marshal="http://namespaces.plone.org/supermodel/marshal" xmlns:indexer="http://namespaces.plone.org/supermodel/indexer" xmlns:users="http://namespaces.plone.org/supermodel/users" xmlns:lingua="http://namespaces.plone.org/supermodel/lingua" xmlns:easyform="http://namespaces.plone.org/supermodel/easyform" xmlns="http://namespaces.plone.org/supermodel/schema">
  <schema>
    <field name="myfield" type="z3c.relationfield.schema.RelationChoice">
      <description/>
      <title>My Field</title>
      <portal_type>
        <element>Document</element>
      </portal_type>
      <form:widget type="plone.app.z3cform.widgets.relateditems.RelatedItemsFieldWidget"/>
    </field>
  </schema>
</model>

4. Create a "Test" object using the ++add++test form with the test "My Field" relation field in Chrome browser

On add form load the field has the "Please fill out this field" error message

It prevents form submit even after selecting a valid Document in the widget.

The same behavior is not present:

• in Firefox
• on DX edit form in Chrome
• in Chrome if other fields are added to the form

Used:

• Browser Chrome
• Plone Version 6.1.2
• Classic UI https://classic.demo.plone.org/

Expected behavior

The widget should work in Chrome browser.

[szakitibi]

Note: This is an edge case for Chrome/Chromium browser. It is most likely a JS validation bug, so probably the fix will have to be applied in plone/mockup and released in plone.staticresources. A temporary fix is to set widget.required = False before returning it here and rely on backend validation.

[petschki]

Please note, that pat-relateditems (used for RelatedItemsFieldWidget) is marked as deprecated in favor of pat-contentbrowser since Plone 6.1 ... can you try this with <form:widget type="plone.app.z3cform.widgets.contentbrowser.ContentBrowserFieldWidget"/> ?

[szakitibi]

@petschki Quick test results for switching to ContentBrowserFieldWidget on Classic demo UI:

• It still shows the "Please fill out this field" validation message on initial load, but at least it updates properly after selecting a valid item and does not prevent the submit.
• It is not possible to navigate upwards. Although that has been the case for the other widget too, so it might be related to the used vocabulary.
• It has a bug in the "Favorites", clicking on the "Current content" it drops a popup with "Plone/en/demo is not found".

I know I'm stating the obvious here, but the recommended ContentBrowserFieldWidget widget is the default one. It is a bit cumbersome in case the user has to select an Item from the same folder. The old RelatedItemsFieldWidget widget is much simpler in that case.