Google Chrome Autofill Incorrectly Maps 2-Letter State Codes in WooCommerce Checkout Blocks

[jnelson614]

Describe the bug

When using Google Chrome's autofill feature, states are saved using their 2-letter postal codes (e.g., Massachusetts is saved as "MA"). However, when this autofill is applied to the WooCommerce checkout blocks, the state selection is incorrect. For instance, when "MA" is autofilled, the system mistakenly selects "Maine" instead of "Massachusetts".

To reproduce

Steps to reproduce the behavior:

1. Go to fairing.ravenlabsnh.com (this is just a out of the box test WP site).
2. Navigate to Shop (to right corner in the header)
3. Add T-shirts to cart and go to checkout page
4. On checkout page, let chrome autofill the billing address
5. See that state is incorrectly filled out.

Expected behavior

I expect the postal code for the state (MA) to be mapped to the correct state (Massachusetts)

Screenshots

Environment

WordPress:

• WordPress version: 6.3.2
• Gutenberg version: N/A
• WooCommerce version: 8.2.1
• WooCommerce Blocks version: 11.3.1
• Site language: English
• Any other plugins installed: Other then standard out of the box plugins, all others are deactivated

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version 118.0.5993.70 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: Pixel 7
• OS: Android 14 Beta
• Browser Chrome
• Version 118.0.5993.80

Additional context

This issue is not exclusive to the clean WordPress setup (described in the reproduce steps). We have also observed it on the staging site for our T-Shirt Ecommerce business, which we are in the process of migrating to use checkout blocks. This happens on both desktop and mobile.

[mikejolley]

Thanks for the report. Should be resolved in #11410