Commit 6fa353bf751 for woocommerce
commit 6fa353bf75144d9856a3cbcb9f78bed45806cdb4
Author: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Wed Apr 8 09:24:08 2026 +0000
Fix address autocomplete not updating HTML value attribute on field change (#63524)
* Initial plan
* Fix: update HTML value attribute in setFieldValue for address autocomplete
Co-authored-by: opr <5656702+opr@users.noreply.github.com>
* Add changelog
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: opr <5656702+opr@users.noreply.github.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
diff --git a/plugins/woocommerce/changelog/copilot-fix-autocomplete-zip-code-update b/plugins/woocommerce/changelog/copilot-fix-autocomplete-zip-code-update
new file mode 100644
index 00000000000..6fa3673aa29
--- /dev/null
+++ b/plugins/woocommerce/changelog/copilot-fix-autocomplete-zip-code-update
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Ensure value attribute is updated when selecting autocomplete address
diff --git a/plugins/woocommerce/client/legacy/js/frontend/address-autocomplete.js b/plugins/woocommerce/client/legacy/js/frontend/address-autocomplete.js
index ba05bb36fbc..394b9508a3d 100644
--- a/plugins/woocommerce/client/legacy/js/frontend/address-autocomplete.js
+++ b/plugins/woocommerce/client/legacy/js/frontend/address-autocomplete.js
@@ -679,6 +679,7 @@ if (
const setFieldValue = ( input, value ) => {
if ( input ) {
input.value = value;
+ input.setAttribute( 'value', value );
input.dispatchEvent( new Event( 'change' ) );
// Also trigger Select2 update if it's a Select2 field.
diff --git a/plugins/woocommerce/client/legacy/js/frontend/test/address-autocomplete.js b/plugins/woocommerce/client/legacy/js/frontend/test/address-autocomplete.js
index 44c027e73b4..fdd416c62d3 100644
--- a/plugins/woocommerce/client/legacy/js/frontend/test/address-autocomplete.js
+++ b/plugins/woocommerce/client/legacy/js/frontend/test/address-autocomplete.js
@@ -1003,6 +1003,35 @@ describe( 'Address Suggestions Component', () => {
);
} );
+ test( 'should update value attribute of address fields when address is selected', async () => {
+ // Pre-populate fields with old values (simulating pre-filled checkout)
+ document.getElementById( 'billing_city' ).setAttribute( 'value', 'Old City' );
+ document.getElementById( 'billing_city' ).value = 'Old City';
+ document.getElementById( 'billing_postcode' ).setAttribute( 'value', '91210' );
+ document.getElementById( 'billing_postcode' ).value = '91210';
+
+ // Setup suggestions
+ billingAddressInput.value = '123';
+ billingAddressInput.focus();
+ billingAddressInput.dispatchEvent( new Event( 'input' ) );
+ await new Promise( ( resolve ) => setTimeout( resolve, 150 ) );
+
+ // Click on first suggestion
+ const firstSuggestion = document.querySelector(
+ '#address_suggestions_billing .suggestions-list li'
+ );
+ firstSuggestion.click();
+
+ // Wait for async operations and timeout
+ await new Promise( ( resolve ) => setTimeout( resolve, 250 ) );
+
+ // Check that both the property and the HTML value attribute are updated
+ expect( document.getElementById( 'billing_city' ).getAttribute( 'value' ) ).toBe( 'City' );
+ expect( document.getElementById( 'billing_postcode' ).getAttribute( 'value' ) ).toBe( '12345' );
+ expect( document.getElementById( 'billing_address_1' ).getAttribute( 'value' ) ).toBe( '123 Main Street' );
+ expect( document.getElementById( 'billing_state' ).getAttribute( 'value' ) ).toBe( 'CA' );
+ } );
+
test( 'should handle partial address data from provider', async () => {
// Mock provider to return partial data
mockProvider.select.mockResolvedValue( {