fix(richtext-lexical): ensure nested forms do not use form element (#11462)

Previously, lexical blocks initialized a new `Form` component that rendered as `<form>` in the DOM. This may lead to React errors, as forms nested within forms is not valid HTML.

This PR changes them to render as `<div>` in the DOM instead.

Author: AlessioGr

packages/richtext-lexical/src/features/blocks/client/component/index.tsx

@@ -541,6 +541,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
             return await onChange({ formState, submit: true })
           },
         ]}
+        el="div"
         fields={clientBlockFields}
         initialState={initialState}
         onChange={[onChange]}

packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx

@@ -391,6 +391,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
         },
       ]}
       disableValidationOnSubmit
+      el="div"
       fields={clientBlock?.fields}
       initialState={initialState || {}}
       onChange={[onChange]}

packages/ui/src/forms/Form/index.tsx

@@ -66,6 +66,7 @@ export const Form: React.FC<FormProps> = (props) => {
     disableSuccessStatus,
     disableValidationOnSubmit,
     // fields: fieldsFromProps = collection?.fields || global?.fields,
+    el,
     handleResponse,
     initialState, // fully formed initial field state
     isDocumentForm,
@@ -783,8 +784,10 @@ export const Form: React.FC<FormProps> = (props) => {
       }
     : {}
 
+  const El: 'form' = (el as unknown as 'form') || 'form'
+
   return (
-    <form
+    <El
       action={typeof action === 'function' ? void action : action}
       className={classes}
       method={method}
@@ -816,7 +819,7 @@ export const Form: React.FC<FormProps> = (props) => {
           </FormWatchContext.Provider>
         </FormContext.Provider>
       </DocumentFormContextComponent>
-    </form>
+    </El>
   )
 }
 

packages/ui/src/forms/Form/types.ts

@@ -25,6 +25,10 @@ export type FormProps = {
    * you can disable checks that the form makes before it submits
    */
   disableValidationOnSubmit?: boolean
+  /**
+   * If you don't want the form to be a <form> element, you can pass a string here to use as the wrapper element.
+   */
+  el?: string
   /**
    * By default, the form will get the field schema (not data) from the current document. If you pass this in, you can override that behavior.
    * This is very useful for sub-forms, where the form's field schema is not necessarily the field schema of the current document (e.g. for the Blocks

test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts

@@ -1190,7 +1190,7 @@ describe('lexicalBlocks', () => {
       // Ensure radio button option1 of radioButtonBlock2 (the default option) is still selected
       await expect(
         radioButtonBlock2.locator('.radio-input:has-text("Option 1")').first(),
-      ).toBeChecked()
+      ).toHaveClass(/radio-input--is-selected/)
 
       // Click radio button option3 of radioButtonBlock2
       await radioButtonBlock2
@@ -1201,7 +1201,7 @@ describe('lexicalBlocks', () => {
       // Ensure previously clicked option2 of radioButtonBlock1 is still selected
       await expect(
         radioButtonBlock1.locator('.radio-input:has-text("Option 2")').first(),
-      ).toBeChecked()
+      ).toHaveClass(/radio-input--is-selected/)
 
       /**
        * Now save and check the actual data. radio button block 1 should have option2 selected and radio button block 2 should have option3 selected