Required Fields for @rjsf/antd

[georgiossalon]

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?

antd

Version

5.8.2

Current Behavior

Input fields that are set as required by the scheme are missing the required property in the browser.

In the following code, if you switch to the MaterialUI or the default Form component you do get the expected result. When using the antd Form component via the withTheme you don't.

Here is a dummy Form:

import React, {createRef} from "react";
import "./App.less";
import {withTheme} from "@rjsf/core";
import Form from '@rjsf/material-ui';
import validator from "@rjsf/validator-ajv8";

import {Theme as AntDTheme} from '@rjsf/antd';
import {Popconfirm} from "antd";

const RJSFForm = withTheme(AntDTheme);

const uiSchema = {
    "ui:disabled": false,
    "ui:order": [
        "Name1",
        "Number 1",
    ],
    Name1: {
        "ui:disabled": false
    },
    "Number 1": {
        "ui:disabled": false
    },
};

const schema = {
    type: "object",
    $schema: "http://json-schema.org/draft-07/schema#",
    required: ["Name1"],
    "ui:order": [
        "Name1",
        "Number 1",
    ],
    properties: {
        "Name1": {
            type: "string"
        },
        "Number 1": {
            type: "number",
            default: 0
        },
    },
    $id: "http://json-schema.org/draft-07/schema#"
};

function App() {
    const formRef = createRef();
    const submitRef = createRef();
    const onError = (errors) => console.log(errors);

    return (
        <div className="App">
            <RJSFForm
                schema={schema}
                uiSchema={uiSchema}
                validator={validator}
                onError={onError}
                ref={formRef}
                formData={{
                    "Number 1": 0,
                }}
            >
                <button hidden={true} ref={submitRef}/>
            </RJSFForm>
            <button
                onClick={() => {
                    submitRef.current.click();
                }}
            >
                submit
            </button>

        </div>
    );
}


export default App

Expected Behavior

In the browser, the input tags should get the required property when the set into the schema.

Steps To Reproduce

Sandbox: CodeSandbox

Environment

- OS: -
- Node: v16
- npm: v8

Anything else?

No response

[nickgros]

Here's a playground link. The antd UI indicates that the field is required, and Ajv validation works as expected. The main difference that I see is that the antd theme is missing HTML5 validation.

[georgiossalon]

@nickgros Yeah, the field looks like it would be a required one but in the input tag, the required property is missing. The same applies to your playground link.