Skip to content

Fix BuyNowButton disabled prop being silently ignored#3691

Open
J8118 wants to merge 2 commits intoShopify:mainfrom
J8118:fix/buynowbutton-disabled-prop-ignored
Open

Fix BuyNowButton disabled prop being silently ignored#3691
J8118 wants to merge 2 commits intoShopify:mainfrom
J8118:fix/buynowbutton-disabled-prop-ignored

Conversation

@J8118
Copy link
Copy Markdown
Contributor

@J8118 J8118 commented Apr 10, 2026

Summary

In BuyNowButton.tsx line 69, the disabled attribute uses ?? (nullish coalescing) with loading on the left side:

disabled={loading ?? (passthroughProps as {disabled?: boolean}).disabled}

Since loading is a boolean (always true or false, never null or undefined), the right side is never evaluated. The consumer's disabled prop is silently ignored. Compare this to AddToCartButton which correctly combines conditions with ||.

File changed:

  • packages/hydrogen-react/src/BuyNowButton.tsx (line 69)

Before:

disabled={loading ?? (passthroughProps as {disabled?: boolean}).disabled}

After:

disabled={loading || (passthroughProps as {disabled?: boolean}).disabled}

@J8118 J8118 requested a review from a team as a code owner April 10, 2026 09:04
@fredericoo
Copy link
Copy Markdown
Contributor

good spot - since `loading` is `useState(false)`, it's always a boolean and `??` never falls through. the consumer's `disabled` prop was being silently ignored.

this is a behavioural change though - consumers passing `disabled={true}` will now have it respected when `loading` is `false`. could you add a changeset? since this touches `hydrogen-react`, it also needs a companion hydrogen bump (hydrogen re-exports everything from hydrogen-react):

```md

"@shopify/hydrogen-react": patch
"@shopify/hydrogen": patch

Fixed BuyNowButton to respect the consumer's `disabled` prop when not in a loading state. Previously, the nullish coalescing operator (`??`) prevented the fallback from ever being evaluated since `loading` is always a boolean.
```

cheers!

@J8118
Copy link
Copy Markdown
Contributor Author

J8118 commented Apr 16, 2026

Done — just pushed the changeset with the hydrogen-react + hydrogen bump

J8118 added 2 commits April 17, 2026 02:27
The nullish coalescing operator (??) was used with the loading boolean,
which is always true or false (never null/undefined). This meant the
consumer's disabled prop was never evaluated. Changed to logical OR
(||) so the button is disabled when either loading or explicitly
disabled by the consumer.
@J8118 J8118 force-pushed the fix/buynowbutton-disabled-prop-ignored branch from 1999702 to 7442849 Compare April 16, 2026 22:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants