App Bridge save bar test harness

Last result

Basic dirty-form save bar

Editing the field opens the save bar; Save/Discard resolve and close it.

Async save

Save shows a spinner (loading) for about a second before resolving and closing the bar.

Discard confirmation

This bar sets discardConfirmation - clicking Discard shows App Bridge's own native confirmation dialog before the field actually reverts.

leaveConfirmation() before navigating

Dirty the field, then click "Navigate to home" - it awaits shopify.saveBar.leaveConfirmation() before calling useNavigate, so the merchant is prompted mid-navigation.

Two independent save bars by id

Each field has its own save bar (distinct ids), shown/hidden imperatively via shopify.saveBar.show(id)/hide(id) - editing one never shows the other's bar.

Inside a modal (known limitation)

Opens a modal containing its own SaveBar bound to a field - confirms ui-save-bar does not render inside a modal, so the title bar buttons are the only working way to resolve it.