Clear hidden fields on load

assets/js/base/context/hooks/use-checkout-address.js

@@ -81,20 +81,29 @@ export const useCheckoutAddress = () => {
 		}
 	}, [ shippingAsBilling, setBillingData, shippingAddress, billingData ] );
 
-	const setEmail = ( value ) =>
-		void setBillingData( {
-			email: value,
-		} );
+	const setEmail = useCallback(
+		( value ) =>
+			void setBillingData( {
+				email: value,
+			} ),
+		[ setBillingData ]
+	);
 
-	const setPhone = ( value ) =>
-		void setBillingData( {
-			phone: value,
-		} );
+	const setPhone = useCallback(
+		( value ) =>
+			void setBillingData( {
+				phone: value,
+			} ),
+		[ setBillingData ]
+	);
 
-	const setShippingPhone = ( value ) =>
-		void setShippingFields( {
-			phone: value,
-		} );
+	const setShippingPhone = useCallback(
+		( value ) =>
+			void setShippingFields( {
+				phone: value,
+			} ),
+		[ setShippingFields ]
+	);
 
 	// Note that currentShippingAsBilling is returned rather than the current state of shippingAsBilling--this is so that
 	// the billing fields are not rendered before sync (billing field values are debounced and would be outdated)

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-billing-address-block/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
 import {
 	useStoreEvents,
 	useCheckoutAddress,
@@ -34,6 +34,13 @@ const Block = ( {
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
 
+	// Clears data if fields are hidden.
+	useEffect( () => {
+		if ( ! showPhoneField ) {
+			setPhone( '' );
+		}
+	}, [ showPhoneField, setPhone ] );
+
 	const addressFieldsConfig = useMemo( () => {
 		return {
 			company: {
@@ -51,7 +58,7 @@ const Block = ( {
 			<AddressForm
 				id="billing"
 				type="billing"
-				onChange={ ( values ) => {
+				onChange={ ( values: Record< string, unknown > ) => {
 					setBillingFields( values );
 					dispatchCheckoutEvent( 'set-billing-address' );
 				} }

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
 import CheckboxControl from '@woocommerce/base-components/checkbox-control';
@@ -35,6 +35,13 @@ const Block = ( {
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
 
+	// Clears data if fields are hidden.
+	useEffect( () => {
+		if ( ! showPhoneField ) {
+			setShippingPhone( '' );
+		}
+	}, [ showPhoneField, setShippingPhone ] );
+
 	const addressFieldsConfig = useMemo( () => {
 		return {
 			company: {
@@ -52,7 +59,10 @@ const Block = ( {
 			<AddressForm
 				id="shipping"
 				type="shipping"
-				onChange={ setShippingFields }
+				onChange={ ( values: Record< string, unknown > ) => {
+					setShippingFields( values );
+					dispatchCheckoutEvent( 'set-shipping-address' );
+				} }
 				values={ shippingFields }
 				fields={ Object.keys( defaultAddressFields ) }
 				fieldConfig={ addressFieldsConfig }