Disabled prop does not disable form using chakra-ui theme

[jrpolesi]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

chakra-ui

Version

5.12.1

Current Behavior

The disabled and readonly prop is not working correctly in 2.8.0 version of chakra-ui

When the disabled or readonly prop is used to change the behavior of the whole form, only the inputs are being disabled, the interface buttons remain enabled, allowing moving, adding or removing items from the form

What is probably causing this bug is that react-jsonschema-form uses disabled prop to disable buttons but chakra-ui is always overriding the disabled prop as mentioned in this issue chakra-ui/chakra-ui#7269

Expected Behavior

When using the props disabled={true} or readonly={true} directly on the Form component, it should disable the whole form, including the interface buttons

Steps To Reproduce

1. In this codesandbox
2. Add disabled or readonly prop to RJSForm component
3. Buttons are still clickable

Environment

- OS: Pop!_OS 20.04
- Node: 18.14.1
- npm: 9.3.1

Anything else?

No response

[nickgros]

Thanks for the report. Seems like we must use their custom props. A PR to fix this would be welcome.

[Sachin-chaurasiya]

Hello @nickgros, I would like to take this up, could you please assign this to me and assist me?

[nickgros]

@Sachin-chaurasiya you are welcome to make a PR, which we will happily review