[SOLVED] Web3uikit - Form button : have to refresh page to reactivate it

Technical Issue Reporting
#1

Hey

I am using the web3uikit Form. it looks great and works fine the first time the form is submitted.

However, the button gets deactivated when it is pressed, and i cannot submit a second time without having to refresh the page - the button stalls. Pretty annoying. Have been looking at the documentation but cannot seem to find a configuration that resolves the issue.

does anyone have a solution?

here is my setting:

<Form 
                    data={[
                    {
                        name: "Token Id #",
                        type: "number",
                        inputWidth: "100%",
                        validation: {
                            required: true
                            },                        
                        value: "",
                        key: "tokenid",
                    },
                ]}
                title=""
                id="Search Form"
                onSubmit={onEventSearch}                             
                    />

here is how the button it looks after having been submitted.

image
image849×223 4.21 KB

#2

The button being disabled on submit is the default behaviour. You will need to implement a workaround (if you’re using @web3uikit/core):

E.g. using customFooter prop to use your own submit button.

import { Button } from '@web3uikit/core';

...
<Form
  // rest of props
  onSubmit={onEventSearch}
  customFooter={<Button type="submit" text="Submit" />}
/>
#3

Hey @alex

Thanks for the reply. I have implemented you workaround which is elegant and smooth.

I would suggest for moralis to include your answer in the documentation. I can imagine cases where you want to disable on submit (especially as we are dealing with assets) but it is great that it can be overridden.

The issue can be closed