From afe245fdce9158e0207c968dd9db70fd67dee568 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:44:20 +0100
Subject: [PATCH] Make the address 2 line visible when a value is autofilled
(#49730)
---
.../form/address-line-2-field.tsx | 52 ++++++++++++++-----
.../components/cart-checkout/form/style.scss | 4 ++
.../form/test/address-line-2-field.tsx | 42 +++++++++++++++
...heckout-block.merchant.block_theme.spec.ts | 8 +--
.../changelog/fix-address-autocomplete | 4 ++
5 files changed, 92 insertions(+), 18 deletions(-)
create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/style.scss
create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/test/address-line-2-field.tsx
create mode 100644 plugins/woocommerce/changelog/fix-address-autocomplete
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx
index ab6a8dd3c78..0c12494ff70 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx
+++ b/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 (
{ isFieldVisible ? (
@@ -40,18 +49,33 @@ const AddressLine2Field = < T extends AddressFormValues | ContactFormValues >( {
}
/>
) : (
-
+ <>
+
+
+ handleHiddenInputChange( event.target.value )
+ }
+ />
+
) }
);
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/style.scss
new file mode 100644
index 00000000000..fd24db68f17
--- /dev/null
+++ b/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;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/test/address-line-2-field.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/test/address-line-2-field.tsx
new file mode 100644
index 00000000000..4b75195ab8b
--- /dev/null
+++ b/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 (
+ {
+ setValue( newValue );
+ } }
+ />
+ );
+ };
+ render( );
+ 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' );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts
index 917ac28beb8..aff27e720e5 100644
--- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts
+++ b/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 ( {
diff --git a/plugins/woocommerce/changelog/fix-address-autocomplete b/plugins/woocommerce/changelog/fix-address-autocomplete
new file mode 100644
index 00000000000..5e4031905c0
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-address-autocomplete
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Ensure the second address line input appears when using autofill