Make the address 2 line visible when a value is autofilled (#49730)

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx

@@ -3,13 +3,14 @@
  */
 import { ValidatedTextInput } from '@woocommerce/blocks-components';
 import { AddressFormValues, ContactFormValues } from '@woocommerce/settings';
-import { useState, Fragment } from '@wordpress/element';
+import { useState, Fragment, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { AddressLineFieldProps } from './types';
+import './style.scss';
 
 const AddressLine2Field = < T extends AddressFormValues | ContactFormValues >( {
 	field,
@@ -20,10 +21,18 @@ const AddressLine2Field = < T extends AddressFormValues | ContactFormValues >( {
 	const isFieldRequired = field?.required ?? false;
 
 	// Display the input field if it has a value or if it is required.
-	const [ isFieldVisible, setFieldVisible ] = useState(
+	const [ isFieldVisible, setIsFieldVisible ] = useState(
 		() => Boolean( value ) || isFieldRequired
 	);
 
+	const handleHiddenInputChange = useCallback(
+		( newValue: string ) => {
+			onChange( field.key as keyof T, newValue );
+			setIsFieldVisible( true );
+		},
+		[ field.key, onChange ]
+	);
+
 	return (
 		<Fragment>
 			{ isFieldVisible ? (
@@ -40,18 +49,33 @@ const AddressLine2Field = < T extends AddressFormValues | ContactFormValues >( {
 					}
 				/>
 			) : (
-				<button
-					className={
-						'wc-block-components-address-form__address_2-toggle'
-					}
-					onClick={ () => setFieldVisible( true ) }
-				>
-					{ sprintf(
-						// translators: %s: address 2 field label.
-						__( '+ Add %s', 'woocommerce' ),
-						field.label.toLowerCase()
-					) }
-				</button>
+				<>
+					<button
+						className={
+							'wc-block-components-address-form__address_2-toggle'
+						}
+						onClick={ () => setIsFieldVisible( true ) }
+					>
+						{ sprintf(
+							// translators: %s: address 2 field label.
+							__( '+ Add %s', 'woocommerce' ),
+							field.label.toLowerCase()
+						) }
+					</button>
+					<input
+						type="text"
+						tabIndex={ -1 }
+						className="wc-block-components-address-form__address_2-hidden-input"
+						aria-hidden="true"
+						aria-label={ field.label }
+						autoComplete={ field.autocomplete }
+						id={ props?.id }
+						value={ value }
+						onChange={ ( event ) =>
+							handleHiddenInputChange( event.target.value )
+						}
+					/>
+				</>
 			) }
 		</Fragment>
 	);

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/style.scss

@@ -0,0 +1,4 @@
+.wc-block-components-address-form__address_2-hidden-input {
+	position: absolute;
+	left: -20000px;
+}

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/test/address-line-2-field.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+import AddressLine2Field from '@woocommerce/base-components/cart-checkout/form/address-line-2-field';
+import { useState } from '@wordpress/element';
+
+describe( 'Address Line 2 Component', () => {
+	it( 'Renders a hidden field which disappears as soon as text is entered (autofill functionality)', async () => {
+		// Render in a wrapper so we can track the value is sent correctly from hidden to visible input.
+		const FieldWrapper = () => {
+			const [ value, setValue ] = useState( '' );
+			return (
+				<AddressLine2Field
+					field={ {
+						index: 0,
+						key: 'address_2',
+						required: false,
+						label: 'Address 2',
+						optionalLabel: 'Optional Address 2',
+						type: 'text',
+						hidden: false,
+						autocomplete: 'address-line2',
+					} }
+					value={ value }
+					onChange={ ( _: string, newValue: string ) => {
+						setValue( newValue );
+					} }
+				/>
+			);
+		};
+		render( <FieldWrapper /> );
+		const hiddenInput = screen.getByLabelText( 'Address 2' );
+		expect( hiddenInput ).toBeInTheDocument();
+		expect( hiddenInput ).toHaveAttribute( 'aria-hidden', 'true' );
+		fireEvent.change( hiddenInput, { target: { value: '123' } } );
+		expect( hiddenInput ).not.toBeInTheDocument();
+		const visibleInput = screen.getByLabelText( 'Optional Address 2' );
+		expect( visibleInput ).toBeInTheDocument();
+		expect( visibleInput ).toHaveValue( '123' );
+	} );
+} );

plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts

@@ -487,7 +487,7 @@ test.describe( 'Merchant → Checkout', () => {
 				await expect( shippingApartmentLink ).toBeVisible();
 
 				// Verify that the apartment field is hidden by default and the field is optional.
-				await expect( shippingApartmentInput ).toBeHidden();
+				await expect( shippingApartmentInput ).not.toBeInViewport();
 				await expect( shippingApartmentOptionalToggle ).toBeChecked();
 
 				// Make the apartment number required.
@@ -504,7 +504,7 @@ test.describe( 'Merchant → Checkout', () => {
 
 				// Verify that the apartment link and the apartment field are hidden.
 				await expect( shippingApartmentLink ).toBeHidden();
-				await expect( shippingApartmentInput ).toBeHidden();
+				await expect( shippingApartmentInput ).not.toBeInViewport();
 
 				// Display the billing address form.
 				await editor.canvas
@@ -568,7 +568,7 @@ test.describe( 'Merchant → Checkout', () => {
 				await expect( billingApartmentLink ).toBeVisible();
 
 				// Verify that the apartment field is hidden and optional.
-				await expect( billingApartmentInput ).toBeHidden();
+				await expect( billingApartmentInput ).not.toBeInViewport();
 				await expect( billingApartmentOptionalToggle ).toBeChecked();
 
 				// Disable the apartment field.
@@ -576,7 +576,7 @@ test.describe( 'Merchant → Checkout', () => {
 
 				// Verify that the apartment link and the apartment field are hidden.
 				await expect( billingApartmentLink ).toBeHidden();
-				await expect( billingApartmentInput ).toBeHidden();
+				await expect( billingApartmentInput ).not.toBeInViewport();
 			} );
 
 			test( 'Phone input visibility and optional and required can be toggled', async ( {

plugins/woocommerce/changelog/fix-address-autocomplete

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Ensure the second address line input appears when using autofill