Cursor Focus Shifts to Pincode Field on purchase.checkout.shipping-option-list.render-before Extension Point in Shopify Checkout UI

[kalpitrathore1]

Description

I am experiencing an issue with the checkout UI extension on Shopify. When I add custom code to the purchase.checkout.shipping-option-list.render-before extension point, the cursor focus automatically shifts to the pincode field during the checkout process. This unintended behavior disrupts the user experience.

Steps to Reproduce

1. Add the following code in the purchase.checkout.shipping-option-list.render-before extension point.
2. Go through the checkout process and observe the cursor behavior in the pincode field.

Code Example

const shippingRender = reactExtension(
  "purchase.checkout.shipping-option-list.render-before",
  () => (
    <View>
      <AfterAddress />
    </View>
  )
);

export function AfterAddress() {
  const shippingAddress = useShippingAddress();
  const updateAttributes = useApplyAttributeChange();

  useEffect(() => {
    asyncFn();
  }, [shippingAddress]);
 
  async function asyncFn() {
    await updateAttributes({
      type: "updateAttribute",
      key: 'key1',
      value: 'value1',
    });

    await updateAttributes({
      type: "updateAttribute",
      key: 'key2',
      value: 'value2',
    });

    await updateAttributes({
      type: "updateAttribute",
      key: 'key3',
      value: 'value3',
    });

    await updateAttributes({
      type: "updateAttribute",
      key: 'key4',
      value: 'value4',
    });

    await updateAttributes({
      type: "updateAttribute",
      key: 'key5',
      value: 'value5',
    });
  };

  return null;
}

Package Json

{
  "name": "shopify app",
  "private": true,
  "scripts": {
    "build": "NODE_ENV=production remix build",
    "predev": "prisma generate && prisma migrate deploy",
    "dev": "shopify app dev",
    "config:link": "shopify app config link",
    "config:push": "shopify app config push",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "config:use": "shopify app config use",
    "env": "shopify app env",
    "start": "remix-serve build",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "shopify": "shopify",
    "prisma": "prisma",
    "setup": "prisma generate && prisma migrate deploy"
  },
  "dependencies": {
    "@prisma/client": "4.13.0",
    "@remix-run/node": "1.19.1",
    "@remix-run/react": "1.19.1",
    "@remix-run/serve": "1.19.1",
    "@shopify/app": "3.57.1",
    "@shopify/app-bridge-types": "0.0.2",
    "@shopify/cli": "3.57.1",
    "@shopify/polaris": "11.1.2",
    "@shopify/shopify-app-remix": "1.0.3",
    "@shopify/shopify-app-session-storage-prisma": "1.0.0",
    "cross-env": "7.0.3",
    "ejs": "3.1.9",
    "isbot": "latest",
    "prisma": "4.13.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "1.19.1",
    "@remix-run/eslint-config": "1.19.1",
    "@types/eslint": "8.40.0",
    "eslint": "8.42.0",
    "eslint-config-prettier": "8.8.0",
    "prettier": "2.8.8"
  },
  "workspaces": [
    "web",
    "web/frontend",
    "extensions/*"
  ]
}

Code Explanation

1. AfterAddress Component: This component runs the asyncFn function whenever the shippingAddress changes.
2. asyncFn Function: An asynchronous function that sequentially updates a set of custom attributes using the useApplyAttributeChange hook. Each call to updateAttributes changes a specific attribute.

Expected Behavior

The cursor should not automatically shift to the pincode field when custom attributes are updated in this way.

Observed Behavior

The cursor automatically shifts to the pincode field after each updateAttributes call, creating a disrupted user experience.

Possible Cause

It seems that the frequent updateAttributes calls may be triggering a re-render or interfering with the form's focus handling, particularly in the pincode field.

Additional Information

I have attached a video demonstrating this behavior for reference.
https://github.com/user-attachments/assets/fb2e2e36-0580-40f0-a7d5-3bc33915867a