(REGRESSION) useApplyShippingAddressChange hook on one-page checkout changes back to the first saved address

DavidT · December 30, 2024, 11:42pm

This seems to be a regression of the same issue I previously reported here:

github.com/Shopify/ui-extensions

useApplyShippingAddressChange hook on one-page checkout changes back to the first saved address

opened 05:40PM - 29 Apr 24 UTC

closed 06:16PM - 23 Jul 24 UTC

TheSecurityDev

bug foundations Checkout UI Extensions

## Please list the package(s) involved in the issue, and include the version you… are using `@shopify/ui-extensions-react v2024.1.1` ## Describe the bug When a customer is logged in and has saved addresses in their account, they are able to select which address to use on the one-page checkout. However, when updating the address from an extension with the `useApplyShippingAddressChange` hook, if the new address doesn't match any of the addresses in the customer's account, it changes back to the first address in the list. This causes an issue for address validation apps where when you show a suggested address change, trying to switch to that address doesn't work because it will reselect the top address in the list. **Also, this causes a critical infinite-loop issue if the app auto-updates part of the address, such as adding the full +4 zip code or something automatically. The app changes to the first address, but then autofills the address, which then causes it to select the first address again.** This issue doesn't happen on the 3-page checkout, because if the address entered is not the same as one of the saved ones, it changes it to a custom address and still allows entering. ## Steps to reproduce the behavior: 1. Use a one-page checkout. 2. Log in to a customer account that has saved addresses. 3. Create a checkout extension that uses the `useApplyShippingAddressChange` hook to update the address. 4. Observe that when the address is updated, it switches back to the first address automatically, which overwrites the update. ## Expected behavior When updating the address with the `useApplyShippingAddressChange` hook on the one-page checkout, it should allow entering a custom address instead of trying to auto-select one of the saved ones. ## Screenshots ![image](https://github.com/Shopify/ui-extensions/assets/49467229/a6e5c78d-0939-44bd-acb6-fcaaa0f41ca4) ![image](https://github.com/Shopify/ui-extensions/assets/49467229/9cbe3874-a064-4e94-89b1-e9c14a8e7ff1) ## Additional context This issue was reported to us by a user of our app, who was getting reports from their customers about this issue. It's causing an infinite loop and preventing them from checking out. We also believe this is the reason we received a 1-star review (first review) on the app recently.

Now the merchant has reached out again saying that a customer has reported a similar issue. The app is automatically updating the zip code with the +4 code using this hook, so when the customer selects a different saved address other than the first one, it updates and then reselects the first address again. I’m also seeing a loop where you can’t even open the saved addresses list because the address changes and then it closes it automatically.

Can you please look into this ASAP? Last time it took 3 months to fix

Let me know if you need any more information.

Liam-Shopify · January 2, 2025, 12:32pm

Hi David,

Thanks for reporting this here - I’ve connected with the product team who own this area to investigate this. However there may not be an update on this until next week as the product team are currently out of office.

DavidT · January 2, 2025, 3:45pm

Thanks for the update

James_Vidler · January 7, 2025, 4:43pm

Hi David,

We weren’t able to reproduce the issue on our end. Would you be able to provide some extension code that illustrates the problem (including the extension target you are using)? Can you also confirm whether this is happening on customer account checkouts or shop pay?

DavidT · January 8, 2025, 2:39am

Thanks for investigating. I’m actually having some trouble reproducing this as well now. I guess it might not be the same issue as before, but from the video the merchant shared from the customer it looks identical (clicking any address or adding a new address is causing the first address to be selected). I can’t reproduce this exact behaviour however.

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. I deleted the one address it kept defaulting to on my account on the site, and it stopped doing that, which makes me wonder if it’s something only with certain address configurations.

I’ve contacted the merchant for more information to try to debug this further, and also linked them to this discussion.

Also, I don’t know whether it works on Shop Pay or not, since I can’t figure out how to set up a test system, but that’s not where the issue was appearing originally. It does in fact occur due to the customer being logged into an account at checkout.

And finally, the extension target should be purchase.checkout.delivery-address.render-before. Unfortunately, I am currently not able to create a reproducible example.

DavidT · January 11, 2025, 2:59am

So the issue I’m seeing and reproducing is when you click on “Use a saved address”, if the first address in the list doesn’t have the full zip code, the app updates the address to include the full zip code. And when this happens, the saved address list is hidden because the address has changed to one that isn’t in the list.

DavidT · January 14, 2025, 1:52am

@James_Vidler I’ve been told the issue is occurring on Shop Pay express checkout as well.

But I think the problem could be solved if the first address wasn’t selected automatically after clicking “Use a saved address”. It should be left empty for the user to select an address instead, unless the current address already exists in the list where it should select that one instead. Then, when the customer selects an address, it would be a user interaction causing the address change and so automatically updating the address would be okay. Otherwise, what’s happening is clicking “Use a saved address” opens the saved addresses, automatically selects the first one, which changes the address, and then the app updates the zip code, which closes the saved addresses. This all happens very quickly and prevents selecting any different address.

You should be able to reproduce this by creating an extension that changes any part of the address to something else whenever the address changes (override the zip code, for example, and then having a customer account with multiple addresses. Enter a different address, then click “Use a saved address”. It should select the first address automatically, and your extension should update the address. Also remember it only happens on one page checkout.

macaron · February 4, 2025, 7:50am

Hi, I was able to reproduce the following issue in a simple test project.

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 :

github.com/oshima0226/testing-use-apply-shipping-address-change

extensions/modify-shipping-address/src/useChangeAddress1.ts

main

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]);
};

macaron · February 25, 2025, 1:49am

Has there been any progress on this issue?

I think the main issue, as David has pointed out, is that when the list of registered addresses is displayed, the first address is automatically selected.
Because of that, if useShippingAddressChange or FieldError are triggered, the input form appears again, making it impossible to select a different address from the list.

avocadomayo · February 25, 2025, 11:46pm

Hi u/macaron! Thank you for sharing clear reproduction steps and an analysis of the issue - that helps a ton. Unfortunately we don’t have an update on this one yet, but it’s definitely on our radar. Thanks again for the feedback and detailed instructions.

macaron · March 10, 2025, 11:20pm

Hi avocadomayo. Thank you for your reply.
Could you let us know around when these fixes will be completed? Our merchant’s production store is still being affected, and we’ve actually received complaints from customers.

Merkez_Karargah · March 11, 2025, 10:25am

We are experiencing a similar issue with our customers. This is a very critical production issue and our customers are very angry. The addresses on the checkout page is appearing and then disappearing. Based on our analysis, when we clear the checkout-related cookies, the saved addresses re-appear. A cookie is blocking the saved addresses. However, we haven’t found a solution yet.
I’m reaching out because the issue you mentioned is similar and seems to be on your radar. Have there been any updates regarding this issue?

Topic		Replies	Views
[Bug] Applying useApplyShippingAddressChange to a Saved Address Prevents Editing Extensions checkout-ui-ext	2	36	February 4, 2025
Checkout UI extension shippingAddress oneTimeUse is undefined Extensions checkout-ui-ext	7	58	April 19, 2025
useEffect with dependency on useShippingAddress is called 2x Extensions checkout-ui-ext	7	23	March 12, 2025
Help Needed: Address Field 1 and Address Field 2 Returning Undefined in Checkout UI Extension Extensions checkout-ui-ext	1	32	January 7, 2025
[Bug] billingAddress is no longer available on the Customer Order Status page Extensions checkout-ui-ext , customer-account-ext	8	62	January 27, 2025

(REGRESSION) useApplyShippingAddressChange hook on one-page checkout changes back to the first saved address

Related topics