Fixes jumping focus on split UPE blocks gateway select

Fixes issue in blocks checkout where page jumps due to shifting focus by correcting caching of UPE appearance for blocks checkout.

Author: FangedParakeet

changelog/fix-5557-blocks-checkout-focus-changes-on-gateway-select

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixes focus change on gateway select with split UPE enabled.

client/checkout/api/index.js

@@ -523,11 +523,11 @@ export default class WCPayAPI {
 	 * Saves the calculated UPE appearance values in a transient.
 	 *
 	 * @param {Object} appearance The UPE appearance object with style values
-	 * @param {boolean} isBlocksCheckout True if save request is for Blocks Checkout. Default false.
+	 * @param {string} isBlocksCheckout 'true' if save request is for Blocks Checkout. Default 'false'.
 	 *
 	 * @return {Promise} The final promise for the request to the server.
 	 */
-	saveUPEAppearance( appearance, isBlocksCheckout = false ) {
+	saveUPEAppearance( appearance, isBlocksCheckout = 'false' ) {
 		return this.request( getConfig( 'ajaxUrl' ), {
 			is_blocks_checkout: isBlocksCheckout,
 			appearance: JSON.stringify( appearance ),

client/checkout/blocks/upe-fields.js

@@ -385,7 +385,7 @@ const ConsumableWCPayFields = ( { api, ...props } ) => {
 		async function generateUPEAppearance() {
 			// Generate UPE input styles.
 			const upeAppearance = getAppearance( true );
-			await api.saveUPEAppearance( upeAppearance, true );
+			await api.saveUPEAppearance( upeAppearance, 'true' );
 
 			// Update appearance state
 			setAppearance( upeAppearance );

client/checkout/blocks/upe-split-fields.js

@@ -397,7 +397,7 @@ const ConsumableWCPayFields = ( { api, ...props } ) => {
 		async function generateUPEAppearance() {
 			// Generate UPE input styles.
 			const upeAppearance = getAppearance( true );
-			await api.saveUPEAppearance( upeAppearance, true );
+			await api.saveUPEAppearance( upeAppearance, 'true' );
 
 			// Update appearance state
 			setAppearance( upeAppearance );