When using the form managed contextual save bar (i.e. just <form data-save-bar> without any ui-save-bar component) the discard and submit buttons do not get disabled or enter a loading state once a user has submitted the form.
This results in:
double form submissions when a user double-clicks the submit button; and
the state between the backend and the frontend gets out of sync on slow network connections if the user clicks the discard button after the form has been received by the backend but before the response has reached the browser
To Reproduce
Steps to reproduce the behaviour:
Add a <form data-save-bar> to a page without any ui-save-bar elements
Setup a non-remix, non-react backend api somewhere to capture the form submissions and update some database field to the received value
Open browser devtools and enable network throttling to 1kbps
Click the save button
While the form is being submitted, click save again and see a second form submission
While waiting for both form submissions click the discard button
Your browser value will now differ from the twice updated backend value
Expected behaviour
Both buttons should enter a disabled state as soon as the save button is clicked the first time to prevent the above issues.
Ideally the "save" button should also enter a loading state.
The buttons should only be re-enabled after the network response has been received or an error has been caught.
Contextual information
Packages and versions
List the relevant packages you’re using, and their versions. For example:
@shopify/app-bridge @ dev-main
Platform
OS: All
OS Version: All
App: Desktop, Mobile
Additional context
Add any other context about the problem here, such as your app’s configuration (Node, Next.js, Rails).
Describe the bug
When using the form managed contextual save bar (i.e. just
<form data-save-bar>without anyui-save-barcomponent) the discard and submit buttons do not get disabled or enter a loading state once a user has submitted the form.This results in:
To Reproduce
Steps to reproduce the behaviour:
<form data-save-bar>to a page without anyui-save-barelementsExpected behaviour
Both buttons should enter a disabled state as soon as the save button is clicked the first time to prevent the above issues.
Ideally the "save" button should also enter a loading state.
The buttons should only be re-enabled after the network response has been received or an error has been caught.
Contextual information
Packages and versions
List the relevant packages you’re using, and their versions. For example:
@shopify/app-bridge@dev-mainPlatform
Additional context
Add any other context about the problem here, such as your app’s configuration (Node, Next.js, Rails).