search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
86 stars 9 forks source link

How to control the state of the Contextual Save Bar (i.e: disabled)? #246

Closed zavjs closed 6 months ago

zavjs commented 11 months ago

In AppBrigde 2.0 it was possible to extensively control the Contextual Save Bar.

And it seems, as the new documentation would suggest, that the latest version is much more limited in that respect.

I would like my save button to be enabled only when my React Form utility indicated the validity of the form, for example:

const { isValid } = useForm();

<form
  data-save-bar
  data-save-bar-save-button-disabled={!isValid()
>
  <...>
</form>

Is it really not possible? Any plans to allowing this?

darrynten commented 10 months ago

We also rely on enabling and disabling the save button based on form state

vincaslt commented 9 months ago

Seems like it's not preventing submit when form is invalid and there's no way to control that. In the previous API you could control it manually, now it's not possible...

albertogcatalan commented 9 months ago

Is there any way to force with App Bridge v4 to make contextual save bar appear and disappear with JS as it was done before with v3?

mirceapiturca commented 8 months ago

This component should have an exposed API similar to the modal, toast, resourcePicker. Wrapping everything in a form is very buggy in React.

stuartchaney commented 6 months ago

This is preventing us from upgrading to the latest version :_/

Are there plans to add the functionality from the previous version?

stidges commented 6 months ago

I just read that this version of app bridge is required as of today for any new apps, so this issue has become even more important/blocking.. Is there any more information about this?

robertosenabre commented 6 months ago

I'm with @stidges and we need an update regarding this issue. If you force us to update the App bridge without providing an update, it will negatively impact the merchant experience. This does not make sense at all.

charlesdobson commented 6 months ago

Hi all,

We added a new ui-save-bar element for you to manually control the state of the contextual save bar (including disabled and loading buttons) if that works better for you: https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar

There's a SaveBar React component in @shopify/app-bridge-react@4.1.0 too if you'd prefer to use that: https://shopify.dev/docs/api/app-bridge-library/react-components/savebar

Thanks for the feedback!