Prevent form submit on custom widget

[jswale]

Prerequisites

• [X] I have read the documentation

What theme are you using?

antd

What is your question?

Hi,

I'd like to know if it's possible to prevent form submission for a custom widget doing async task

Let's say we have a Custom Widget with an async call in the onChange to call a third party to retrieve a value.

const MyCustomWidget = (props: WidgetProps) => {
  return (
    <input
      type='text'
      className='custom'
      value={props.value}
      required={props.required}
      onChange={(event) => {
        const response = await fetch("https://path/to/api?key=" + event.target.value);
        props.onChange(response.body)
      }
    />
  );
};

Is there a way to block the form submission until the response is retrieve?

Can onChange be async?

The final need for me is to be able to create an other FileUploadWidget sending the data (using post) to the server and retrieving a file token instead of the base64 data.

Thanks.

[heath-freenome]

@jswale I don't believe that onChange can be async given how we've built this. Since you can replace the default submit button with what ever you want by providing children to the Form and you can pass anything you want to any component through the formContext, I imagine you can have your component update some state in the formContext and have your own custom submit button that disables itself when that state it true. Your button click can use the programmatic submit capability to do form submission.

[stale[bot]]

This issue has been automatically marked as possibly close because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

[stale[bot]]

This issue was closed because of lack of recent activity. Reopen if you still need assistance.