From 630d7c8e117f016d03b264e81aa4e4619ab25e1c Mon Sep 17 00:00:00 2001
From: Ngakan Nyoman Ari Surya Khrisna <arisurya228@gmail.com>
Date: Thu, 20 Aug 2026 00:55:23 +0800
Subject: [PATCH 1/3] fix: make browser autofill work

* Determine the autocomplete token and input type based on field.type.name

* Replace the hidden input for the country and province fields with a "visually" hidden <select> element

* Add handleNativeSelectChange to keep the visible dropdown in sync when the
  browser fills the select

* setAllFieldsTouched now supports the *select* elements for country and province.
---
 sdk/src/components/channel-form.tsx           |  5 +-
 sdk/src/components/field-country.tsx          | 71 ++++++++++++++-
 sdk/src/components/field-province.tsx         | 89 ++++++++++++++++---
 sdk/src/components/field-text.tsx             | 34 +++++--
 .../channel-component-province.test.ts        | 21 +++--
 5 files changed, 185 insertions(+), 35 deletions(-)

diff --git a/sdk/src/components/channel-form.tsx b/sdk/src/components/channel-form.tsx
index f64185a7..d176a5b6 100644
--- a/sdk/src/components/channel-form.tsx
+++ b/sdk/src/components/channel-form.tsx
@@ -45,7 +45,10 @@ const ChannelForm = forwardRef<ChannelFormHandle, Props>(
         const form = formRef.current;
         if (!form) return;
         Array.from(form.elements)
-          .filter((el) => el instanceof HTMLInputElement)
+          .filter(
+            (el) =>
+              el instanceof HTMLInputElement || el instanceof HTMLSelectElement,
+          )
           .forEach((input) => {
             if (!input.name) {
               // only mark named fields as touched
diff --git a/sdk/src/components/field-country.tsx b/sdk/src/components/field-country.tsx
index 8886cde8..f4563a23 100644
--- a/sdk/src/components/field-country.tsx
+++ b/sdk/src/components/field-country.tsx
@@ -1,9 +1,15 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "preact/hooks";
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
 import { FieldProps } from "./field";
 import { CountryCode, getCountries } from "libphonenumber-js";
 import { Dropdown, DropdownOption } from "./core/dropdown";
 import { formFieldId, formFieldName, usePrevious } from "../utils";
-import { FunctionComponent } from "preact";
+import { FunctionComponent, TargetedEvent } from "preact";
 import { useChannelComponentData } from "./channel-root";
 
 type FlagIconProps = {
@@ -42,7 +48,7 @@ export const CountryField: FunctionComponent<FieldProps> = (props) => {
     (option) => option.value === selectedCountry,
   );
 
-  const hiddenFieldRef = useRef<HTMLInputElement>(null);
+  const hiddenFieldRef = useRef<HTMLSelectElement>(null);
 
   useOnCardCountryChange((newCountry: CountryCode) => {
     if (hiddenFieldRef.current) {
@@ -75,9 +81,55 @@ export const CountryField: FunctionComponent<FieldProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleNativeSelectChange = useCallback(
+    (event: TargetedEvent<HTMLSelectElement>) => {
+      const filledValue = event.currentTarget.value;
+
+      if (!filledValue) {
+        // browser cleared the field, so clear our copy too
+        setSelectedCountry(undefined);
+        onChange();
+        return;
+      }
+
+      const option = COUNTRIES_AS_DROPDOWN_OPTIONS.find(
+        (o) => o.value === filledValue,
+      );
+      if (option) {
+        onChangeWrapper(option);
+      } else if (hiddenFieldRef.current) {
+        // not a country we offer
+        hiddenFieldRef.current.value = selectedCountry ?? "";
+      }
+    },
+    [onChange, onChangeWrapper, selectedCountry],
+  );
+
+  // the country list never changes
+  const selectOptions = useMemo(
+    () =>
+      COUNTRIES_AS_DROPDOWN_OPTIONS.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.title}
+        </option>
+      )),
+    [],
+  );
+
   return (
     <div>
-      <input type="hidden" name={name} defaultValue="" ref={hiddenFieldRef} />
+      {/* a `<select>`, not `type="hidden"` browsers only autofill what they render */}
+      <select
+        name={name}
+        ref={hiddenFieldRef}
+        autoComplete="country"
+        onChange={handleNativeSelectChange}
+        style={VISUALLY_HIDDEN}
+        tabIndex={-1}
+      >
+        <option value="" />
+        {selectOptions}
+      </select>
       <Dropdown
         id={id}
         options={COUNTRIES_AS_DROPDOWN_OPTIONS}
@@ -91,6 +143,17 @@ export const CountryField: FunctionComponent<FieldProps> = (props) => {
   );
 };
 
+/** Hidden from sight but still rendered, so browser autofill can reach it. */
+export const VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+};
+
 export const COUNTRIES_AS_DROPDOWN_OPTIONS = getCountries()
   .map((countryCode) => {
     const country = new Intl.DisplayNames(["en"], {
diff --git a/sdk/src/components/field-province.tsx b/sdk/src/components/field-province.tsx
index eb12352a..126120de 100644
--- a/sdk/src/components/field-province.tsx
+++ b/sdk/src/components/field-province.tsx
@@ -1,7 +1,14 @@
-import { useRef, useCallback, useLayoutEffect, useState } from "preact/hooks";
+import {
+  useRef,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "preact/hooks";
 import { FieldProps } from "./field";
 import { CountryCode } from "libphonenumber-js";
 import { Dropdown, DropdownOption } from "./core/dropdown";
+import { VISUALLY_HIDDEN } from "./field-country";
 import { useSession } from "./session-provider";
 import { PROVINCES_CA, PROVINCES_GB, PROVINCES_US } from "../data/provinces";
 import {
@@ -29,7 +36,16 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
 
   const [value, setValue] = useState(field.initial_value as string);
 
-  const hiddenFieldRef = useRef<HTMLInputElement>(null);
+  // the `<select>` in dropdown mode, or the visible input in free text mode
+  const hiddenFieldRef = useRef<HTMLInputElement | HTMLSelectElement | null>(
+    null,
+  );
+  const setFieldRef = useCallback(
+    (element: HTMLInputElement | HTMLSelectElement | null) => {
+      hiddenFieldRef.current = element;
+    },
+    [],
+  );
 
   const clearValue = useCallback(() => {
     setValue("");
@@ -76,6 +92,38 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
     ? options.findIndex((option) => option.value === value)
     : -1;
 
+  // the country list never changes
+  const selectOptions = useMemo(
+    () =>
+      options?.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.title}
+        </option>
+      )),
+    [options],
+  );
+
+  const handleNativeSelectChange = useCallback(
+    (event: TargetedEvent<HTMLSelectElement>) => {
+      const filledValue = event.currentTarget.value;
+
+      if (!filledValue) {
+        // browser cleared the field, so clear our copy too
+        clearValue();
+        return;
+      }
+
+      const option = options?.find((o) => o.value === filledValue);
+      if (option) {
+        onChangeDropdown(option);
+      } else if (hiddenFieldRef.current) {
+        // not a province we offer, keep our value so the UI and the form agree
+        hiddenFieldRef.current.value = value ?? "";
+      }
+    },
+    [options, onChangeDropdown, clearValue, value],
+  );
+
   // if the options list changes, clear the value,
   // but not on first render,
   // or if the current value happens to be a valid option in the new list
@@ -107,22 +155,37 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
 
   return (
     <>
-      <input type="hidden" name={name} defaultValue="" ref={hiddenFieldRef} />
       {options ? (
-        <Dropdown
-          key={objectId(options)}
-          id={id}
-          options={options}
-          selectedIndex={selectedOptionIndex}
-          onChange={onChangeDropdown}
-          placeholder={field.placeholder}
-          enableSearch
-          className="xendit-form-field-inner"
-        />
+        <>
+          {/* a `<select>`, not `type="hidden"` browsers only autofill what they render */}
+          <select
+            name={name}
+            ref={setFieldRef}
+            autoComplete="address-level1"
+            onChange={handleNativeSelectChange}
+            style={VISUALLY_HIDDEN}
+            tabIndex={-1}
+          >
+            <option value="" />
+            {selectOptions}
+          </select>
+          <Dropdown
+            key={objectId(options)}
+            id={id}
+            options={options}
+            selectedIndex={selectedOptionIndex}
+            onChange={onChangeDropdown}
+            placeholder={field.placeholder}
+            enableSearch
+            className="xendit-form-field-inner"
+          />
+        </>
       ) : (
         <input
           type="text"
           id={id}
+          name={name}
+          ref={setFieldRef}
           value={value}
           onChange={onChangeInput}
           placeholder={field.placeholder}
diff --git a/sdk/src/components/field-text.tsx b/sdk/src/components/field-text.tsx
index 35d1aaaa..7183c30b 100644
--- a/sdk/src/components/field-text.tsx
+++ b/sdk/src/components/field-text.tsx
@@ -29,21 +29,39 @@ export const TextField: FunctionComponent<FieldProps> = (props) => {
       id={id}
       name={name}
       ref={inputRef}
-      type="text"
       placeholder={field.placeholder}
       className={`xendit-form-field-inner xendit-text-14`}
       value={value}
       onBlur={handleBlur}
       onChange={handleChange}
-      minLength={isTextField(field) ? field.type.min_length : undefined}
-      maxLength={isTextField(field) ? field.type.max_length : undefined}
-      autoComplete={isTextField(field) ? field.type.autocomplete : undefined}
+      {...inputAttributesFor(field)}
     />
   );
 };
 
-function isTextField(field: ChannelFormField): field is ChannelFormField & {
-  type: { name: "text" };
-} {
-  return field.type.name === "text";
+type TypeDerivedInputAttributes = {
+  type: "text" | "email";
+  minLength?: number;
+  maxLength?: number;
+  autoComplete?: string;
+};
+
+function inputAttributesFor(
+  field: ChannelFormField,
+): TypeDerivedInputAttributes {
+  switch (field.type.name) {
+    case "email":
+      return { type: "email", autoComplete: "email" };
+    case "postal_code":
+      return { type: "text", autoComplete: "postal-code" };
+    case "text":
+      return {
+        type: "text",
+        minLength: field.type.min_length,
+        maxLength: field.type.max_length,
+        autoComplete: field.type.autocomplete,
+      };
+    default:
+      return { type: "text" };
+  }
 }
diff --git a/sdk/test-feature-level/channel-component-province.test.ts b/sdk/test-feature-level/channel-component-province.test.ts
index 77ab6b4a..a83e432c 100644
--- a/sdk/test-feature-level/channel-component-province.test.ts
+++ b/sdk/test-feature-level/channel-component-province.test.ts
@@ -9,6 +9,12 @@ afterEach(() => {
   document.body.replaceChildren();
 });
 
+function dropdownItem(label: string) {
+  return screen.getByText(label, {
+    selector: ".xendit-dropdown-item-title",
+  });
+}
+
 describe("channel component state/province field test", () => {
   it("should render state/province field with initial values", async () => {
     const sdk = new XenditComponentsTest({
@@ -41,7 +47,7 @@ describe("channel component state/province field test", () => {
     const country1 = buttons[0];
     const province1 = buttons[1];
     const country2 = buttons[2];
-    const province2 = screen.getAllByRole("textbox")[0];
+    const province2 = screen.getByPlaceholderText("State / Province");
 
     expect(country1.textContent).toBe("United States");
     expect(province1.textContent).toBe("California");
@@ -68,25 +74,22 @@ describe("channel component state/province field test", () => {
     const country1 = buttons[0];
 
     await country1.click();
-    const singaporeOption = screen.getByText("Singapore");
-    await singaporeOption.click();
+    await dropdownItem("Singapore").click();
 
-    expect(screen.getAllByRole("textbox")).toHaveLength(2); // first province field should have switched to a text input
-    const province1 = screen.getAllByRole("textbox")[0];
+    expect(screen.getAllByPlaceholderText("State / Province")).toHaveLength(2);
+    const province1 = screen.getAllByPlaceholderText("State / Province")[0];
     expect(province1).toHaveValue("");
 
     // test changing text input to dropdown also clears the value
     const country2 = buttons[2];
     await country2.click();
-    const canadaOption = screen.getByText("Canada");
-    await canadaOption.click();
+    await dropdownItem("Canada").click();
     const province2 = screen.getAllByRole("button")[2]; // second province field should have switched to a dropdown
     expect(province2.textContent).toBe("State / Province");
 
     // test we can change the province
     await province2.click();
-    const ontarioOption = screen.getByText("Ontario");
-    await ontarioOption.click();
+    await dropdownItem("Ontario").click();
     expect(screen.getAllByRole("button")[2].textContent).toBe("Ontario");
   });
 });

From 7ea7a3a9e1bef534302e176190ad087c9ae5a5ca Mon Sep 17 00:00:00 2001
From: Ngakan Nyoman Ari Surya Khrisna <arisurya228@gmail.com>
Date: Fri, 21 Aug 2026 01:50:12 +0800
Subject: [PATCH 2/3] fix: address code review feedback

* Add margin/padding/border to the visually-hidden select styling

* Rename hiddenFieldRef to valueFieldRef and explain why a callback ref is needed

* Add tests for handleNativeSelectChange covering both country and province

* Fix a bug surfaced by those tests: province could silently lose its value when switching between dropdown and free-text mode
---
 sdk/src/components/field-country.tsx          |   3 +
 sdk/src/components/field-province.tsx         |  39 +++---
 .../channel-component-country.test.ts         | 119 ++++++++++++++++++
 .../channel-component-province.test.ts        | 107 ++++++++++++++++
 4 files changed, 251 insertions(+), 17 deletions(-)
 create mode 100644 sdk/test-feature-level/channel-component-country.test.ts

diff --git a/sdk/src/components/field-country.tsx b/sdk/src/components/field-country.tsx
index f4563a23..28fd754b 100644
--- a/sdk/src/components/field-country.tsx
+++ b/sdk/src/components/field-country.tsx
@@ -148,6 +148,9 @@ export const VISUALLY_HIDDEN = {
   position: "absolute",
   width: "1px",
   height: "1px",
+  margin: "0",
+  padding: "0",
+  border: "0",
   overflow: "hidden",
   clipPath: "inset(50%)",
   whiteSpace: "nowrap",
diff --git a/sdk/src/components/field-province.tsx b/sdk/src/components/field-province.tsx
index 126120de..5f1b483e 100644
--- a/sdk/src/components/field-province.tsx
+++ b/sdk/src/components/field-province.tsx
@@ -36,21 +36,21 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
 
   const [value, setValue] = useState(field.initial_value as string);
 
-  // the `<select>` in dropdown mode, or the visible input in free text mode
-  const hiddenFieldRef = useRef<HTMLInputElement | HTMLSelectElement | null>(
+  // carries a `<select>` or `<input>` depending on mode, so a callback ref is used since one ref object can't be typed to both.
+  const valueFieldRef = useRef<HTMLInputElement | HTMLSelectElement | null>(
     null,
   );
   const setFieldRef = useCallback(
     (element: HTMLInputElement | HTMLSelectElement | null) => {
-      hiddenFieldRef.current = element;
+      valueFieldRef.current = element;
     },
     [],
   );
 
   const clearValue = useCallback(() => {
     setValue("");
-    if (hiddenFieldRef.current) {
-      hiddenFieldRef.current.value = "";
+    if (valueFieldRef.current) {
+      valueFieldRef.current.value = "";
     }
     onChange();
   }, [onChange]);
@@ -58,11 +58,11 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
   const onChangeDropdown = useCallback(
     (option: DropdownOption) => {
       setValue(option.value);
-      if (hiddenFieldRef.current) {
-        hiddenFieldRef.current.value = option.value;
+      if (valueFieldRef.current) {
+        valueFieldRef.current.value = option.value;
       }
       onChange();
-      hiddenFieldRef.current?.dispatchEvent(new InternalSetFieldTouchedEvent());
+      valueFieldRef.current?.dispatchEvent(new InternalSetFieldTouchedEvent());
     },
     [onChange],
   );
@@ -70,11 +70,11 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
   const onChangeInput = useCallback(
     (e: TargetedEvent<HTMLInputElement>) => {
       setValue(e.currentTarget.value);
-      if (hiddenFieldRef.current) {
-        hiddenFieldRef.current.value = (e.target as HTMLInputElement).value;
+      if (valueFieldRef.current) {
+        valueFieldRef.current.value = (e.target as HTMLInputElement).value;
       }
       onChange();
-      hiddenFieldRef.current?.dispatchEvent(new InternalSetFieldTouchedEvent());
+      valueFieldRef.current?.dispatchEvent(new InternalSetFieldTouchedEvent());
     },
     [onChange],
   );
@@ -116,9 +116,9 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
       const option = options?.find((o) => o.value === filledValue);
       if (option) {
         onChangeDropdown(option);
-      } else if (hiddenFieldRef.current) {
+      } else if (valueFieldRef.current) {
         // not a province we offer, keep our value so the UI and the form agree
-        hiddenFieldRef.current.value = value ?? "";
+        valueFieldRef.current.value = value ?? "";
       }
     },
     [options, onChangeDropdown, clearValue, value],
@@ -137,16 +137,21 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
 
     // if options list changes, clear the selected value
     if (options !== previousOptions) {
-      if (selectedOptionIndex !== -1) return; // ok, this is still valid
+      if (selectedOptionIndex !== -1) {
+        if (valueFieldRef.current) {
+          valueFieldRef.current.value = value;
+        }
+        return;
+      }
       clearValue();
     }
-  }, [clearValue, options, previousOptions, selectedOptionIndex]);
+  }, [clearValue, options, previousOptions, selectedOptionIndex, value]);
 
   // on first render, populate hidden field and notify parent of initial value
   useLayoutEffect(() => {
     if (field.initial_value) {
-      if (hiddenFieldRef.current) {
-        hiddenFieldRef.current.value = value;
+      if (valueFieldRef.current) {
+        valueFieldRef.current.value = value;
       }
       onChange();
     }
diff --git a/sdk/test-feature-level/channel-component-country.test.ts b/sdk/test-feature-level/channel-component-country.test.ts
new file mode 100644
index 00000000..ee0fdbeb
--- /dev/null
+++ b/sdk/test-feature-level/channel-component-country.test.ts
@@ -0,0 +1,119 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { XenditComponentsTest } from "../src";
+import { waitForEvent } from "./utils";
+import { assert, sleep } from "../src/utils";
+import { internal } from "../src/internal";
+import { screen } from "@testing-library/dom";
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("channel component country field test", () => {
+  describe("browser autofill via the hidden native select", () => {
+    // simulates the browser autofill, writing a value directly onto the native `<select>` and firing its change event
+    function autofillNativeSelect(select: HTMLSelectElement, value: string) {
+      select.value = value;
+      select.dispatchEvent(new Event("change"));
+    }
+
+    it("clears the country when the browser clears the select", async () => {
+      const sdk = new XenditComponentsTest({
+        componentsSdkKey: "test-client-key",
+      });
+
+      await waitForEvent(sdk, "init");
+
+      const ch = sdk.getActiveChannels({ filter: "UI_STATE_PROVINCE_TEST" })[0];
+      assert(ch);
+      document.body.appendChild(sdk.createChannelComponent(ch));
+
+      // sleeping here isn't ideal but the province field relies on the country field's onChange to populate its options and that rerender is async even though it shouldn't be
+      await sleep(1);
+
+      const select = document.querySelector(
+        'select[name="country_field"]',
+      ) as HTMLSelectElement;
+      expect(select.value).toBe("US");
+
+      autofillNativeSelect(select, "");
+      await sleep(1); // wait for the dropdown UI to re-render with the new value
+
+      const channelProperties = sdk[
+        internal
+      ].liveComponents.paymentChannels.get(
+        "UI_STATE_PROVINCE_TEST",
+      )?.channelProperties;
+      expect(channelProperties).toMatchObject({ country_field: "" });
+      expect(screen.getAllByRole("button")[0].textContent).toBe("Country");
+    });
+
+    it("updates the country when the browser fills a country we offer", async () => {
+      const sdk = new XenditComponentsTest({
+        componentsSdkKey: "test-client-key",
+      });
+
+      await waitForEvent(sdk, "init");
+
+      const ch = sdk.getActiveChannels({ filter: "UI_STATE_PROVINCE_TEST" })[0];
+      assert(ch);
+      document.body.appendChild(sdk.createChannelComponent(ch));
+
+      // sleeping here isn't ideal but the province field relies on the country field's onChange to populate its options and that rerender is async even though it shouldn't be
+      await sleep(1);
+
+      const select = document.querySelector(
+        'select[name="country_field"]',
+      ) as HTMLSelectElement;
+
+      autofillNativeSelect(select, "ID");
+      await sleep(1); // wait for the dropdown UI to re-render with the new value
+
+      const channelProperties = sdk[
+        internal
+      ].liveComponents.paymentChannels.get(
+        "UI_STATE_PROVINCE_TEST",
+      )?.channelProperties;
+      expect(channelProperties).toMatchObject({ country_field: "ID" });
+      expect(screen.getAllByRole("button")[0].textContent).toBe("Indonesia");
+    });
+
+    it("keeps the previous country when the browser fills a value we don't offer", async () => {
+      const sdk = new XenditComponentsTest({
+        componentsSdkKey: "test-client-key",
+      });
+
+      await waitForEvent(sdk, "init");
+
+      const ch = sdk.getActiveChannels({ filter: "UI_STATE_PROVINCE_TEST" })[0];
+      assert(ch);
+      document.body.appendChild(sdk.createChannelComponent(ch));
+
+      // sleeping here isn't ideal but the province field relies on the country field's onChange to populate its options and that rerender is async even though it shouldn't be
+      await sleep(1);
+
+      const select = document.querySelector(
+        'select[name="country_field"]',
+      ) as HTMLSelectElement;
+
+      // a country the autofill might write that isn't in our list
+      const unknownOption = document.createElement("option");
+      unknownOption.value = "ZZ";
+      select.appendChild(unknownOption);
+
+      autofillNativeSelect(select, "ZZ");
+
+      // UI and hidden select both fall back to the value we already had
+      const channelProperties = sdk[
+        internal
+      ].liveComponents.paymentChannels.get(
+        "UI_STATE_PROVINCE_TEST",
+      )?.channelProperties;
+      expect(channelProperties).toMatchObject({ country_field: "US" });
+      expect(screen.getAllByRole("button")[0].textContent).toBe(
+        "United States",
+      );
+      expect(select.value).toBe("US");
+    });
+  });
+});
diff --git a/sdk/test-feature-level/channel-component-province.test.ts b/sdk/test-feature-level/channel-component-province.test.ts
index a83e432c..357389cd 100644
--- a/sdk/test-feature-level/channel-component-province.test.ts
+++ b/sdk/test-feature-level/channel-component-province.test.ts
@@ -92,4 +92,111 @@ describe("channel component state/province field test", () => {
     await dropdownItem("Ontario").click();
     expect(screen.getAllByRole("button")[2].textContent).toBe("Ontario");
   });
+
+  describe("browser autofill via the hidden native select", () => {
+    // simulates the browser autofil, writing a value directly onto the native `<select>` and firing its change event
+    function autofillNativeSelect(select: HTMLSelectElement, value: string) {
+      select.value = value;
+      select.dispatchEvent(new Event("change"));
+    }
+
+    it("clears the province when the browser clears the select", async () => {
+      const sdk = new XenditComponentsTest({
+        componentsSdkKey: "test-client-key",
+      });
+
+      await waitForEvent(sdk, "init");
+
+      const ch = sdk.getActiveChannels({ filter: "UI_STATE_PROVINCE_TEST" })[0];
+      assert(ch);
+      document.body.appendChild(sdk.createChannelComponent(ch));
+
+      // sleeping here isn't ideal but the province field relies on the country field's onChange to populate its options and that rerender is async even though it shouldn't be
+      await sleep(1);
+
+      const select = document.querySelector(
+        'select[name="province_field"]',
+      ) as HTMLSelectElement;
+      expect(select.value).toBe("CA");
+
+      autofillNativeSelect(select, "");
+      await sleep(1); // wait for the dropdown UI to re-render with the new value
+
+      const channelProperties = sdk[
+        internal
+      ].liveComponents.paymentChannels.get(
+        "UI_STATE_PROVINCE_TEST",
+      )?.channelProperties;
+      expect(channelProperties).toMatchObject({ province_field: "" });
+      expect(screen.getAllByRole("button")[1].textContent).toBe(
+        "State / Province",
+      );
+    });
+
+    it("updates the province when the browser fills a province we offer", async () => {
+      const sdk = new XenditComponentsTest({
+        componentsSdkKey: "test-client-key",
+      });
+
+      await waitForEvent(sdk, "init");
+
+      const ch = sdk.getActiveChannels({ filter: "UI_STATE_PROVINCE_TEST" })[0];
+      assert(ch);
+      document.body.appendChild(sdk.createChannelComponent(ch));
+
+      // sleeping here isn't ideal but the province field relies on the country field's onChange to populate its options and that rerender is async even though it shouldn't be
+      await sleep(1);
+
+      const select = document.querySelector(
+        'select[name="province_field"]',
+      ) as HTMLSelectElement;
+
+      autofillNativeSelect(select, "NY");
+      await sleep(1); // wait for the dropdown UI to re-render with the new value
+
+      const channelProperties = sdk[
+        internal
+      ].liveComponents.paymentChannels.get(
+        "UI_STATE_PROVINCE_TEST",
+      )?.channelProperties;
+      expect(channelProperties).toMatchObject({ province_field: "NY" });
+      expect(screen.getAllByRole("button")[1].textContent).toBe("New York");
+    });
+
+    it("keeps the previous province when the browser fills a value we don't offer", async () => {
+      const sdk = new XenditComponentsTest({
+        componentsSdkKey: "test-client-key",
+      });
+
+      await waitForEvent(sdk, "init");
+
+      const ch = sdk.getActiveChannels({ filter: "UI_STATE_PROVINCE_TEST" })[0];
+      assert(ch);
+      document.body.appendChild(sdk.createChannelComponent(ch));
+
+      // sleeping here isn't ideal but the province field relies on the country field's onChange to populate its options and that rerender is async even though it shouldn't be
+      await sleep(1);
+
+      const select = document.querySelector(
+        'select[name="province_field"]',
+      ) as HTMLSelectElement;
+
+      // a province the autofill might write that isn't in our list
+      const unknownOption = document.createElement("option");
+      unknownOption.value = "ZZ";
+      select.appendChild(unknownOption);
+
+      autofillNativeSelect(select, "ZZ");
+
+      // UI and hidden select both fall back to the value we already had
+      const channelProperties = sdk[
+        internal
+      ].liveComponents.paymentChannels.get(
+        "UI_STATE_PROVINCE_TEST",
+      )?.channelProperties;
+      expect(channelProperties).toMatchObject({ province_field: "CA" });
+      expect(screen.getAllByRole("button")[1].textContent).toBe("California");
+      expect(select.value).toBe("CA");
+    });
+  });
 });

From 37f176146f9cd48b8abe813e7047cd0b66199b39 Mon Sep 17 00:00:00 2001
From: Ngakan Nyoman Ari Surya Khrisna <arisurya228@gmail.com>
Date: Fri, 21 Aug 2026 15:34:44 +0800
Subject: [PATCH 3/3] fix: sync phone country dropdown and add missing
 test-data autocomplete

---
 sdk/src/components/field-phone-number.tsx | 11 +++++++++++
 sdk/src/components/field-province.tsx     |  2 +-
 sdk/src/data/test-data.ts                 |  6 ++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/sdk/src/components/field-phone-number.tsx b/sdk/src/components/field-phone-number.tsx
index 97c7bbf3..487b0de2 100644
--- a/sdk/src/components/field-phone-number.tsx
+++ b/sdk/src/components/field-phone-number.tsx
@@ -118,6 +118,17 @@ export const PhoneNumberField: FunctionComponent<FieldProps> = (props) => {
   function formatForUser(_country = country, _localNumber = localNumber) {
     const phoneNumber = sanitizePhoneNumber(_country, _localNumber);
     if (phoneNumber) {
+      // sync the dropdown if the number is from a different country
+      if (phoneNumber.country && phoneNumber.country !== _country.value) {
+        const matchedCountry =
+          COUNTRIES_WITH_DIAL_CODES_AS_DROPDOWN_OPTIONS.find(
+            (option) => option.value === phoneNumber.country,
+          );
+        if (matchedCountry) {
+          setCountryCode(matchedCountry.value as string);
+          _country = matchedCountry;
+        }
+      }
       const international = phoneNumber.formatInternational();
       // remove country dial code from displayed local number
       setLocalNumber(
diff --git a/sdk/src/components/field-province.tsx b/sdk/src/components/field-province.tsx
index 5f1b483e..9a808a70 100644
--- a/sdk/src/components/field-province.tsx
+++ b/sdk/src/components/field-province.tsx
@@ -92,7 +92,7 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
     ? options.findIndex((option) => option.value === value)
     : -1;
 
-  // the country list never changes
+  // rebuild only when the province list changes
   const selectOptions = useMemo(
     () =>
       options?.map((option) => (
diff --git a/sdk/src/data/test-data.ts b/sdk/src/data/test-data.ts
index 741ea487..4e9bc592 100644
--- a/sdk/src/data/test-data.ts
+++ b/sdk/src/data/test-data.ts
@@ -213,6 +213,7 @@ export function makeTestBffData(): BffResponse {
             type: {
               name: "text",
               max_length: 255,
+              autocomplete: "given-name",
             },
             channel_property: "billing_information.first_name",
             span: 1,
@@ -227,6 +228,7 @@ export function makeTestBffData(): BffResponse {
             type: {
               name: "text",
               max_length: 255,
+              autocomplete: "family-name",
             },
             channel_property: "billing_information.last_name",
             span: 1,
@@ -242,6 +244,7 @@ export function makeTestBffData(): BffResponse {
             type: {
               name: "text",
               max_length: 255,
+              autocomplete: "email",
             },
             channel_property: "billing_information.email",
             span: 2,
@@ -285,6 +288,7 @@ export function makeTestBffData(): BffResponse {
             type: {
               name: "text",
               max_length: 255,
+              autocomplete: "address-level2",
             },
             channel_property: "billing_information.city",
             span: 2,
@@ -300,6 +304,7 @@ export function makeTestBffData(): BffResponse {
             type: {
               name: "text",
               max_length: 255,
+              autocomplete: "address-line1",
             },
             channel_property: "billing_information.street_line1",
             span: 2,
@@ -315,6 +320,7 @@ export function makeTestBffData(): BffResponse {
             type: {
               name: "text",
               max_length: 255,
+              autocomplete: "address-line2",
             },
             channel_property: "billing_information.street_line2",
             span: 2,