(I apologize if this is machine translated and difficult to read.)

Please tell me about useFormStatus().

I created a dialog with a form using the Modal component from the bootstrap and react-bootstrap packages.

I want to make it so that this dialog cannot be closed while the form action is running.

Specifically, I want to pass the state of useFormStatus() of the TestFormBody component in the code to the keyboard attribute of the Modal component of TestDialog so that the form cannot be closed with the Esc key if it is being submitted. However, I am having trouble passing the value of useFormStatus() to the parent component. Is there a good way to do this?

One method I came up with was to change the state within the form action, but that did not work for me.

function TestFormBody() {
    const {pending} = useFormStatus();
    return (
        <>
            <Modal.Header closeButton>
                <Modal.Title>test</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                test
            </Modal.Body>
            <Modal.Footer>
                <Button disabled={pending} type="submit">submit</Button>
            </Modal.Footer>
        </>
    );
}

function TestDialog({ isShow, onClose }: {
    isShow: boolean,
    onClose: () => void
}) {
    const [formState, formDispatch] = useFormState(handleSubmit, undefined);

    async function handleSubmit(): Promise<void>{
        //form action
        return new Promise(resolve => {
            setTimeout(() => {
                resolve();
            }, 3000);
        });
    }

    return (
        <Modal show={isShow} onHide={onClose} keyboard={true}>
            <Form action={formDispatch}>
                <TestFormBody />
            </Form>
        </Modal>
    );
}