Unexpected value for attribute "discardconfirmation" on <ui-save-bar>

[timmoti]

Describe the bug

Using both the new react component, SaveBar and the web component ui-save-bar, I tried to introduce the discardConfirmation prop to them but was faced with the following error:

Error: Unexpected value for attribute "discardconfirmation" on <ui-save-bar>

Call Stack
<unknown>
https://cdn.shopify.com/shopifycloud/app-bridge.js (1:11838)
dt
https://cdn.shopify.com/shopifycloud/app-bridge.js (1:12097)
r.L
https://cdn.shopify.com/shopifycloud/app-bridge.js (1:31396)
r.setAttribute
https://cdn.shopify.com/shopifycloud/app-bridge.js (1:31105)
setAttribute
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (2558:9)
setValueForAttribute
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (33235:12)
setPropOnCustomElement
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (33624:12)
setInitialProperties
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (35368:2)
finalizeInitialChildren
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (19725:16)
completeWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25843:13)
completeUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25648:4)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25353:4)
workLoopSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25308:6)
renderRootSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24525:19)
recoverFromConcurrentError
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24789:19)
performSyncWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10286:12)
flushSyncWorkAcrossRoots_impl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10246:2)
flushSyncWorkOnAllRoots
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10391:2)
cb
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10562:6)

To Reproduce

Steps to reproduce the behaviour:

Add the <SaveBar id='save-bar' discardConfirmation></SaveBar> component as the last component of a app-bridge-react modal

Expected behaviour

There should not be any error.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge @ 3.7.10
• @shopify/app-bridge-react @ 4.1.1
• @shopify/polaris @ 12.12.1
• @shopify/app-bridge-types @ 0.0.9

Platform

• OS: MacOS
• OS Version: Sonoma14.4
• App: Shopify Embedded App

Additional context

The app uses NextJs 14.1.0.

[benfarhner]

I'm experiencing the same issue.

• @shopify/app-bridge-react@4.1.1
• @shopify/app-bridge@latest (pulled from CDN)
• @shopify/polaris@12.21.0

[henrytao-me]

Hi, I am looking into this. In the meantime, you can do <SaveBar id='save-bar' discardConfirmation=""></SaveBar>

[henrytao-me]

Note that: this is an issue with React for custom element. There is nothing we can do about it. See facebook/react#9230

Set empty string as my suggestion above is the workaround until React fixes it.

<SaveBar id='save-bar' discardConfirmation=""></SaveBar>

[DamirAid]

Note that: this is an issue with React for custom element. There is nothing we can do about it. See facebook/react#9230

Set empty string as my suggestion above is the workaround until React fixes it.

<SaveBar id='save-bar' discardConfirmation=""></SaveBar>

thanks for the update! what about leave Confirmation modal, can we remove it programmatically, since there is a bug now - #313

[henrytao-me]

There is no way to clear it manually. I am looking into the #313 now. See you over there I guess.

[muchisx]

@henrytao-me (not sure how is currently done) but why not wrapping the actual web-component with a React component that takes the cleaner props and then pass it down to the web-component as needed?

That way you can keep the api clean for the users (so we can just pass discardConfirmation={conditionBoolean} through it and the component will just take care of passing it down correctly to the underlying web-component

Just thinking on the app-brige-react as an API that connects to the actual web-component but through standard React syntax/practices