diff --git a/sdk/src/components/channel-form.tsx b/sdk/src/components/channel-form.tsx
index f64185a..d176a5b 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 8886cde..28fd754 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,20 @@ 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",
+  margin: "0",
+  padding: "0",
+  border: "0",
+  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-phone-number.tsx b/sdk/src/components/field-phone-number.tsx
index 97c7bbf..487b0de 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 eb12352..9a808a7 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,12 +36,21 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
 
   const [value, setValue] = useState(field.initial_value as string);
 
-  const hiddenFieldRef = useRef<HTMLInputElement>(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) => {
+      valueFieldRef.current = element;
+    },
+    [],
+  );
 
   const clearValue = useCallback(() => {
     setValue("");
-    if (hiddenFieldRef.current) {
-      hiddenFieldRef.current.value = "";
+    if (valueFieldRef.current) {
+      valueFieldRef.current.value = "";
     }
     onChange();
   }, [onChange]);
@@ -42,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],
   );
@@ -54,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],
   );
@@ -76,6 +92,38 @@ export const ProvinceField: FunctionComponent<FieldProps> = (props) => {
     ? options.findIndex((option) => option.value === value)
     : -1;
 
+  // rebuild only when the province list 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 (valueFieldRef.current) {
+        // not a province we offer, keep our value so the UI and the form agree
+        valueFieldRef.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
@@ -89,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();
     }
@@ -107,22 +160,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 35d1aaa..7183c30 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/src/data/test-data.ts b/sdk/src/data/test-data.ts
index 741ea48..4e9bc59 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,
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 0000000..ee0fdbe
--- /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 77ab6b4..357389c 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,129 @@ 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");
   });
+
+  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");
+    });
+  });
 });