Description

When a field uses a validity prop:

isValid: {
	required: true,
},

and it is edited via a modal:

layout: {
	type: 'panel' as const,
	openAs: 'modal',
},

then the user can click the Apply button even if the field value is not valid.

A fix here would be to disable the Apply button when the form is not valid. For example, by adding disabled={ ! isValid } in this Button:

Step-by-step reproduction instructions

1. Create a field with:

isValid: {
	required: true,
},

2. In the form, set its layout to:

layout: {
	type: 'panel' as const,
	openAs: 'modal',
},

3. Add it to a DataForm.
4. Click to edit it.
5. Don't fill in a value -- notice that an error message shows up below the field.
6. Notice that you are able to click the Apply button, bypassing any validity checks.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure