Hi, I was able to reproduce the following issue in a simple test project.
DavidT:
I was seeing a different issue on the merchant’s website that wasn’t showing in development, where selecting the “Use a saved address” button would briefly flash the address selector, and then the address would update and it would disappear again, making it impossible to select an address.
When the list of addresses is opened, the app automatically updates the values, causing the input form to appear and preventing the buyer from selecting a different address.
You can see the issue here:https://jam.dev/c/c49b71db-7091-4ad4-859a-d8fdb40dfc21
The code used for testing is available here. It’s simply a scaffolded app that calls useApplyShippingAddressChange :
import { useApplyShippingAddressChange, useShippingAddress } from "@shopify/ui-extensions-react/checkout";
import { useEffect } from "react";
/**
* Just arbitrarily change the address1 field.
*/
export const useChangeAddress1 = () => {
const shippingAddress = useShippingAddress();
const applyChange = useApplyShippingAddressChange();
useEffect(() => {
console.log('changing address1.');
applyChange?.({
type: 'updateShippingAddress',
address: {
address1: 'modified',
}
});
}, [applyChange, shippingAddress]);
};
1 Like