From 9e75c606b49a5741981331bfe819d2885971bfe4 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 20 Aug 2025 01:07:06 -0300
Subject: [PATCH 01/51] adapt process to use two letter country code, derive
 state from it

---
 projects/packages/forms/src/modules/field-phone/view.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 9b091ae4460c8..1322a1a0add22 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -88,6 +88,8 @@ const { actions } = store( NAMESPACE, {
 	callbacks: {
 		initializeCountrySelector() {
 			const context = getContext();
+			window.parsePhoneNumber = parsePhoneNumber;
+			window.AsYouType = AsYouType;
 			if ( context.showCountrySelector ) {
 				context.countryList = countries.map( country => ( {
 					...country,

From f73861b04f5cc3b1d95fdb72c482264c065da915 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Wed, 20 Aug 2025 01:11:13 -0300
Subject: [PATCH 02/51] remove debugging code

---
 projects/packages/forms/src/modules/field-phone/view.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 1322a1a0add22..9b091ae4460c8 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -88,8 +88,6 @@ const { actions } = store( NAMESPACE, {
 	callbacks: {
 		initializeCountrySelector() {
 			const context = getContext();
-			window.parsePhoneNumber = parsePhoneNumber;
-			window.AsYouType = AsYouType;
 			if ( context.showCountrySelector ) {
 				context.countryList = countries.map( country => ( {
 					...country,

From 57ca513404f005710f59baf80f96c97fc16805f3 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 Aug 2025 14:55:12 -0300
Subject: [PATCH 03/51] remove field-phone registration and handlers

---
 .../forms/src/contact-form/class-contact-form-field.php         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 794a51c96b3f9..3305e9c6177a2 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1069,7 +1069,7 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 		<?php
 		$input = ob_get_clean();
 
-		$field = $label . $input . $this->get_error_div( $id, 'phone' );
+		$field = $label . $input . $this->get_error_div( $id, 'telephone' );
 		return $field;
 	}
 

From 758c73ba4b010a50ab25c7787430a0311b4e088b Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 25 Aug 2025 19:01:48 -0300
Subject: [PATCH 04/51] deprovision default when not using country selector on
 phone field

---
 .../forms/src/contact-form/class-contact-form-field.php        | 2 ++
 .../forms/src/contact-form/class-contact-form-plugin.php       | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 3305e9c6177a2..4c7db46def97a 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -210,6 +210,8 @@ public function __construct( $attributes, $content = null, $form = null ) {
 				$attributes['showcountryselector'] = true;
 			} else {
 				$attributes['showcountryselector'] = false;
+				// phone uses default for country selector, so unset it
+				unset( $attributes['default'] );
 			}
 		}
 
diff --git a/projects/packages/forms/src/contact-form/class-contact-form-plugin.php b/projects/packages/forms/src/contact-form/class-contact-form-plugin.php
index 048847f357afb..a047afda7c06d 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-plugin.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-plugin.php
@@ -510,6 +510,9 @@ public static function block_attributes_to_shortcode_attributes( $atts, $type, $
 				// This input is exclusively used by the new telephone field.
 				if ( 'jetpack/phone-input' === $block_name ) {
 					$atts['placeholder'] = $inner_block['attrs']['placeholder'] ?? '';
+					if ( ! isset( $atts['showcountryselector'] ) || ! $atts['showcountryselector'] ) {
+						unset( $atts['default'] );
+					}
 
 					if ( ! isset( $atts['showCountrySelector'] ) || ! $atts['showCountrySelector'] ) {
 						unset( $atts['default'] );

From 43301df9c7969f9125f800a360beb3c01abe6153 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 25 Aug 2025 19:18:16 -0300
Subject: [PATCH 05/51] cleanup useless code

---
 .../forms/src/contact-form/class-contact-form-field.php        | 2 --
 .../forms/src/contact-form/class-contact-form-plugin.php       | 3 ++-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 4c7db46def97a..3305e9c6177a2 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -210,8 +210,6 @@ public function __construct( $attributes, $content = null, $form = null ) {
 				$attributes['showcountryselector'] = true;
 			} else {
 				$attributes['showcountryselector'] = false;
-				// phone uses default for country selector, so unset it
-				unset( $attributes['default'] );
 			}
 		}
 
diff --git a/projects/packages/forms/src/contact-form/class-contact-form-plugin.php b/projects/packages/forms/src/contact-form/class-contact-form-plugin.php
index a047afda7c06d..a8417591cff11 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-plugin.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-plugin.php
@@ -510,7 +510,8 @@ public static function block_attributes_to_shortcode_attributes( $atts, $type, $
 				// This input is exclusively used by the new telephone field.
 				if ( 'jetpack/phone-input' === $block_name ) {
 					$atts['placeholder'] = $inner_block['attrs']['placeholder'] ?? '';
-					if ( ! isset( $atts['showcountryselector'] ) || ! $atts['showcountryselector'] ) {
+
+					if ( ! isset( $atts['showCountrySelector'] ) || ! $atts['showCountrySelector'] ) {
 						unset( $atts['default'] );
 					}
 

From fd9fa7431fbf7f03c0cf9f59cd09692dcb4c858e Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 26 Aug 2025 00:28:36 -0300
Subject: [PATCH 06/51] use the right field type for international phone
 number: phone

---
 .../forms/src/contact-form/class-contact-form-field.php         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 3305e9c6177a2..794a51c96b3f9 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1069,7 +1069,7 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 		<?php
 		$input = ob_get_clean();
 
-		$field = $label . $input . $this->get_error_div( $id, 'telephone' );
+		$field = $label . $input . $this->get_error_div( $id, 'phone' );
 		return $field;
 	}
 

From cb5ceaa698ea54954161a47cc407c56ed03e109f Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 22 Aug 2025 14:55:12 -0300
Subject: [PATCH 07/51] remove field-phone registration and handlers

---
 .../forms/src/contact-form/class-contact-form-field.php         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 794a51c96b3f9..3305e9c6177a2 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1069,7 +1069,7 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 		<?php
 		$input = ob_get_clean();
 
-		$field = $label . $input . $this->get_error_div( $id, 'phone' );
+		$field = $label . $input . $this->get_error_div( $id, 'telephone' );
 		return $field;
 	}
 

From fb202705e7e3f79a4bb7317fc7d9f53f51ca8d7a Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Thu, 28 Aug 2025 01:41:17 -0300
Subject: [PATCH 08/51] temp, working forwards

---
 .../contact-form/class-contact-form-field.php |  11 +-
 .../forms/src/contact-form/css/combobox.scss  | 119 ++++++++++
 .../forms/src/contact-form/css/grunion.scss   |   2 +-
 .../src/contact-form/css/phone-field.scss     |  10 +-
 .../forms/src/modules/field-phone/view.js     | 215 +++++++++++++++++-
 5 files changed, 347 insertions(+), 10 deletions(-)
 create mode 100644 projects/packages/forms/src/contact-form/css/combobox.scss

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 3305e9c6177a2..14e5acc277a78 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1025,11 +1025,10 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 			);
 			?>
 			>
-				<div class="jetpack-field__input-prefix" data-wp-bind--hidden="!context.showCountrySelector">
+				<div class="jetpack-field__input-prefix" data-wp-bind--hidden="!context.showCountrySelector" data-wp-init="callbacks.initializeCustomComboBox">
 					<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- it's escaped in calling function ?>
 					<select <?php echo $class; ?>
 						data-wp-bind--disabled='state.isSubmitting'
-						data-wp-init="callbacks.initializeCountrySelector"
 						data-wp-on--change="actions.onPhoneCountryChange"
 						data-wp-bind--value="context.phoneCountryCode"
 						data-wp-on--blur='actions.onFieldBlur'>
@@ -2768,6 +2767,14 @@ private function enqueue_slider_field_assets() {
 	private function enqueue_phone_field_assets() {
 		$version = defined( 'JETPACK__VERSION' ) ? \JETPACK__VERSION : '0.1';
 
+		// combobox styles
+		\wp_enqueue_style(
+			'jetpack-form-combobox',
+			plugins_url( '../../dist/contact-form/css/combobox.css', __FILE__ ),
+			array(),
+			$version
+		);
+
 		\wp_enqueue_style(
 			'jetpack-form-phone-field',
 			plugins_url( '../../dist/contact-form/css/phone-field.css', __FILE__ ),
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
new file mode 100644
index 0000000000000..76ffc419d5292
--- /dev/null
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -0,0 +1,119 @@
+// Custom Combobox Styles for Country Selector
+.jetpack-custom-combobox {
+	position: relative;
+
+	.jetpack-combobox-trigger {
+		width: 100%;
+		border: 0 solid #ddd;
+		border-radius: 4px;
+		background: transparent;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font: inherit;
+		line-height: inherit;
+		padding-block: 0;
+		gap: 0.5em;
+
+		&:focus {
+			outline: 0;
+		}
+
+		.jetpack-combobox-trigger-arrow {
+			font-size: 10px;
+			transition: transform 0.2s;
+			color: #666;
+
+			&.jetpack-combobox-open {
+				transform: rotate(180deg);
+			}
+		}
+
+		.jetpack-combobox-selected {
+			flex: 1;
+			text-align: left;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.jetpack-combobox-dropdown {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		background: #fff;
+		border: 1px solid #ddd;
+		border-top: none;
+		border-radius: 0 0 4px 4px;
+		max-height: 200px;
+		z-index: 1000;
+		display: none;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		width: 250px;
+		overflow: hidden;
+
+		&.jetpack-combobox-open {
+			display: block;
+		}
+
+		.jetpack-combobox-search {
+			width: 100%;
+			padding: 8px 12px;
+			border: none;
+			border-bottom: 1px solid #eee;
+			outline: none;
+			font-size: 14px;
+			position: sticky;
+			top: 0;
+			background: #fff;
+			z-index: 1;
+
+			&:focus {
+				border-bottom-color: #007cba;
+			}
+		}
+
+		.jetpack-combobox-options {
+			max-height: 150px;
+			overflow-y: auto;
+		}
+
+		.jetpack-combobox-option {
+			padding: 8px 12px;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			font-size: 14px;
+			transition: background-color 0.1s;
+
+			&:hover {
+				background-color: #f5f5f5;
+			}
+
+			&.jetpack-combobox-option-selected {
+				background-color: #f0f0f0;
+
+				&:hover {
+					background-color: #f0f0f0;
+				}
+			}
+		}
+	}
+}
+
+
+.jetpack-combobox-option-icon {
+	margin-right: 8px;
+}
+
+.jetpack-combobox-option-value {
+	font-weight: 500;
+	margin-right: 8px;
+}
+
+.jetpack-combobox-option-description {
+	color: #666;
+}
diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss
index 625f5c7576881..88a2bdd0024f5 100644
--- a/projects/packages/forms/src/contact-form/css/grunion.scss
+++ b/projects/packages/forms/src/contact-form/css/grunion.scss
@@ -1195,7 +1195,7 @@ on production builds, the attributes are being reordered, causing side-effects
 	align-items: baseline;
 }
 
-.contact-form :is([type="submit"],button:not([type="reset"])) {
+.contact-form :is([type="submit"]) {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 2cbdb43adb49c..0f16e523fc260 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -26,18 +26,18 @@
 		}
 
 		.jetpack-field__input-prefix:not([hidden]) {
-			display: flex;
-			width: 40%;
+			// display: flex;
+			// width: 40%;
 
 			.jetpack-field__input-element {
+				width: 100%;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 
 				@media (max-width: #{ (gb.$break-mobile) }) {
 
 					max-width: calc(gb.$break-mobile / 3);
 				}
-				width: 100%;
-				text-overflow: ellipsis;
-				white-space: nowrap;
 			}
 		}
 
diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 9b091ae4460c8..3baed2cd6a24c 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -1,4 +1,4 @@
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, getElement, withSyncEvent, withScope } from '@wordpress/interactivity';
 import parsePhoneNumber, { AsYouType } from 'libphonenumber-js';
 import { countries } from '../../blocks/field-telephone/country-list';
 import { isEmptyValue } from '../../contact-form/js/validate-helper';
@@ -6,6 +6,19 @@ const NAMESPACE = 'jetpack/form';
 
 const asYouTypes = {};
 
+const updateSelection = ( selectedDisplay, selectedCountry ) => {
+	selectedDisplay.innerHTML = `
+		<span>
+			${ selectedCountry.flag } ${ selectedCountry.value }
+		</span>
+	`;
+	const context = getContext();
+	context.phoneCountryCode = selectedCountry.code;
+	context.countryPrefix = selectedCountry.value;
+	context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
+	asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
+};
+
 const { actions } = store( NAMESPACE, {
 	state: {
 		validators: {
@@ -20,7 +33,7 @@ const { actions } = store( NAMESPACE, {
 					// No need to validate anything.
 					return 'yes';
 				}
-
+				console.log( 'context.fullPhoneNumber', context.fullPhoneNumber );
 				// from this point on, we discard the value as we
 				// use our internal full phone number state getter:
 				value = context.fullPhoneNumber;
@@ -76,6 +89,7 @@ const { actions } = store( NAMESPACE, {
 			actions.updateField( fieldId, value );
 		},
 		onPhoneCountryChange( event ) {
+			console.log( 'onPhoneCountryChange', event );
 			const context = getContext();
 			context.phoneCountryCode = event?.target?.value || context.defaultCountry;
 			context.countryPrefix = countries.find(
@@ -98,5 +112,202 @@ const { actions } = store( NAMESPACE, {
 			}
 			asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
 		},
+		initializeCustomComboBox() {
+			const context = getContext();
+			if ( ! context.showCountrySelector ) {
+				return;
+			}
+
+			// Find the parent element with class jetpack-field__input-prefix
+			const parentElement = getElement().ref;
+
+			if ( ! parentElement ) {
+				return;
+			}
+
+			// Find the native select element
+			const nativeSelect = parentElement.querySelector( 'select' );
+			if ( ! nativeSelect ) {
+				return;
+			}
+
+			// Create the custom combobox container
+			const comboBox = document.createElement( 'div' );
+			comboBox.className = 'jetpack-custom-combobox';
+
+			// Create the display button
+			const displayButton = document.createElement( 'button' );
+			displayButton.type = 'button';
+			displayButton.className = 'jetpack-combobox-trigger';
+
+			// Create the dropdown arrow
+			const arrow = document.createElement( 'span' );
+			arrow.innerHTML = '▼';
+			arrow.className = 'jetpack-combobox-trigger-arrow';
+
+			// Create the selected value display
+			const selectedDisplay = document.createElement( 'span' );
+			selectedDisplay.className = 'jetpack-combobox-selected';
+
+			displayButton.appendChild( selectedDisplay );
+			displayButton.appendChild( arrow );
+
+			// Create the dropdown container
+			const dropdown = document.createElement( 'div' );
+			dropdown.className = 'jetpack-combobox-dropdown';
+
+			// Create the search input
+			const searchInput = document.createElement( 'input' );
+			searchInput.type = 'text';
+			searchInput.placeholder = 'Search countries...';
+			searchInput.className = 'jetpack-combobox-search';
+
+			// Create the options list
+			const optionsList = document.createElement( 'div' );
+			optionsList.className = 'jetpack-combobox-options';
+
+			dropdown.appendChild( searchInput );
+			dropdown.appendChild( optionsList );
+
+			// Assemble the combobox
+			comboBox.appendChild( displayButton );
+			comboBox.appendChild( dropdown );
+
+			// State for the combobox
+			let isOpen = false;
+			let filteredCountries = [ ...countries ];
+			let selectedCountry =
+				countries.find( country => country.code === context.defaultCountry ) || countries[ 0 ];
+
+			// Function to render options
+			const renderOptions = ( countriesToRender = filteredCountries ) => {
+				optionsList.innerHTML = '';
+
+				countriesToRender.forEach( country => {
+					const option = document.createElement( 'div' );
+					option.className = `jetpack-combobox-option ${
+						country.code === selectedCountry.code ? 'jetpack-combobox-option-selected' : ''
+					}`;
+
+					option.innerHTML = `
+						<span class="jetpack-combobox-option-icon">${ country.flag }</span>
+						<span class="jetpack-combobox-option-value">${ country.value }</span>
+						<span class="jetpack-combobox-option-description">${ country.country }</span>
+					`;
+
+					option.addEventListener( 'mouseenter', () => {
+						option.style.backgroundColor = '#f5f5f5';
+					} );
+
+					option.addEventListener( 'mouseleave', () => {
+						option.style.backgroundColor =
+							country.code === selectedCountry.code ? '#f0f0f0' : 'transparent';
+					} );
+
+					option.addEventListener(
+						'click',
+						withScope( () => {
+							selectedCountry = country;
+							updateSelection( selectedDisplay, selectedCountry );
+							closeDropdown();
+						} )
+					);
+
+					optionsList.appendChild( option );
+				} );
+			};
+
+			// Function to open dropdown
+			const openDropdown = withScope( () => {
+				isOpen = true;
+				dropdown.style.display = 'block';
+				arrow.style.transform = 'rotate(180deg)';
+				searchInput.focus();
+				renderOptions();
+			} );
+
+			// Function to close dropdown
+			const closeDropdown = () => {
+				isOpen = false;
+				dropdown.style.display = 'none';
+				arrow.style.transform = 'rotate(0deg)';
+				searchInput.value = '';
+				filteredCountries = [ ...countries ];
+			};
+
+			// Function to filter countries based on search
+			const filterCountries = searchTerm => {
+				const term = searchTerm.toLowerCase();
+				filteredCountries = countries.filter(
+					country =>
+						country.country.toLowerCase().includes( term ) ||
+						country.code.toLowerCase().includes( term ) ||
+						country.value.includes( term )
+				);
+				renderOptions( filteredCountries );
+			};
+
+			// Event listeners
+			displayButton.addEventListener( 'click', e => {
+				e.preventDefault();
+				e.stopPropagation();
+				if ( isOpen ) {
+					closeDropdown();
+				} else {
+					openDropdown();
+				}
+			} );
+
+			searchInput.addEventListener(
+				'input',
+				withScope( e => {
+					filterCountries( e.target.value );
+				} )
+			);
+
+			searchInput.addEventListener(
+				'keydown',
+
+				withSyncEvent(
+					withScope( e => {
+						if ( e.key === 'Escape' ) {
+							closeDropdown();
+						} else if ( e.key === 'Enter' ) {
+							e.preventDefault();
+							// Select the first filtered option if available
+							if ( filteredCountries.length > 0 ) {
+								selectedCountry = filteredCountries[ 0 ];
+								updateSelection( selectedDisplay, selectedCountry );
+								closeDropdown();
+
+								// Focus on the next input (phone number input)
+								const phoneInput = parentElement.parentElement.querySelector( 'input[type="tel"]' );
+								if ( phoneInput ) {
+									phoneInput.focus();
+								}
+							}
+						}
+					} )
+				)
+			);
+
+			// Close dropdown when clicking outside
+			document.addEventListener( 'click', e => {
+				if ( ! comboBox.contains( e.target ) ) {
+					closeDropdown();
+				}
+			} );
+
+			// Initialize the display
+			updateSelection( selectedDisplay, selectedCountry );
+
+			// Hide the native select and replace with custom combobox
+			nativeSelect.style.display = 'none';
+			parentElement.appendChild( comboBox );
+
+			// Store reference for potential cleanup
+			nativeSelect.jetpackCustomComboBox = comboBox;
+			asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
+		},
 	},
 } );

From 107ee5b8c394e4b45b3037a263d8efa1a57b6908 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Thu, 28 Aug 2025 11:57:39 -0300
Subject: [PATCH 09/51] migrating to interactivity, wip

---
 .../contact-form/class-contact-form-field.php |  65 ++-
 .../forms/src/contact-form/css/combobox.scss  |   3 +-
 .../forms/src/modules/field-phone/view.js     | 385 +++++++++---------
 3 files changed, 241 insertions(+), 212 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 14e5acc277a78..8f67d33d5ff04 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1012,22 +1012,71 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- function is supposed to work this way
 			echo wp_interactivity_data_wp_context(
 				array(
-					'fieldId'             => $id,
-					'defaultCountry'      => $default_country,
-					'showCountrySelector' => $this->get_attribute( 'showcountryselector' ),
+					'fieldId'                => $id,
+					'defaultCountry'         => $default_country,
+					'showCountrySelector'    => $this->get_attribute( 'showcountryselector' ),
 					// dynamic
-					'phoneNumber'         => '',
-					'phoneCountryCode'    => $default_country,
-					'countryList'         => array(),
-					'fullPhoneNumber'     => '',
-					'countryPrefix'       => '',
+					'phoneNumber'            => '',
+					'phoneCountryCode'       => $default_country,
+					'countryList'            => array(),
+					'fullPhoneNumber'        => '',
+					'countryPrefix'          => '',
+					// combobox state
+					'useCombobox'            => true,
+					'comboboxOpen'           => false,
+					'searchTerm'             => '',
+					'filteredCountries'      => array(),
+					'selectedCountryIndex'   => 0,
+					'selectedCountryDisplay' => '',
 				)
 			);
 			?>
 			>
 				<div class="jetpack-field__input-prefix" data-wp-bind--hidden="!context.showCountrySelector" data-wp-init="callbacks.initializeCustomComboBox">
+					<div class="jetpack-custom-combobox">
+						<button 
+							class="jetpack-combobox-trigger"
+							type="button"
+							data-wp-on--click="actions.phoneComboboxToggle"
+							data-wp-bind--aria-expanded="context.comboboxOpen">
+							<span 
+								class="jetpack-combobox-selected"
+								data-wp-text="context.selectedCountryDisplay"></span>
+							<span 
+								class="jetpack-combobox-trigger-arrow"
+								data-wp-class--is-open="context.comboboxOpen">▼</span>
+						</button>
+						<div 
+							class="jetpack-combobox-dropdown"
+							data-wp-bind--hidden="!context.comboboxOpen">
+							<input 
+								class="jetpack-combobox-search" 
+								type="text" 
+								placeholder="Search countries..."
+								data-wp-bind--value="context.searchTerm"
+								data-wp-on--input="actions.onComboboxSearch"
+								data-wp-on--keydown="actions.onComboboxKeydown">
+							<div class="jetpack-combobox-options">
+								<template
+								data-wp-each--filtered="context.filteredCountries"
+								data-wp-each-key="context.filtered.code">
+									<div 
+										class="jetpack-combobox-option"
+										data-wp-class--jetpack-combobox-option-selected="context.filtered.selected"
+										data-wp-on--click="actions.selectCountryOption"
+										data-wp-on--mouseenter="actions.highlightOption"
+										data-wp-on--mouseleave="actions.unhighlightOption">
+										<span class="jetpack-combobox-option-icon" data-wp-text="context.filtered.flag"></span>
+										<span class="jetpack-combobox-option-value" data-wp-text="context.filtered.value"></span>
+										<span class="jetpack-combobox-option-description" data-wp-text="context.filtered.country"></span>
+									</div>
+								</template>
+							</div>
+						</div>
+					</div>
 					<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- it's escaped in calling function ?>
 					<select <?php echo $class; ?>
+						data-wp-bind--hidden="context.useCombobox"
 						data-wp-bind--disabled='state.isSubmitting'
 						data-wp-on--change="actions.onPhoneCountryChange"
 						data-wp-bind--value="context.phoneCountryCode"
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 76ffc419d5292..64eb2a646cc91 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -25,7 +25,7 @@
 			transition: transform 0.2s;
 			color: #666;
 
-			&.jetpack-combobox-open {
+			&.is-open {
 				transform: rotate(180deg);
 			}
 		}
@@ -50,7 +50,6 @@
 		border-radius: 0 0 4px 4px;
 		max-height: 200px;
 		z-index: 1000;
-		display: none;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 		width: 250px;
 		overflow: hidden;
diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 3baed2cd6a24c..2f69767c2dc50 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -6,18 +6,18 @@ const NAMESPACE = 'jetpack/form';
 
 const asYouTypes = {};
 
-const updateSelection = ( selectedDisplay, selectedCountry ) => {
-	selectedDisplay.innerHTML = `
-		<span>
-			${ selectedCountry.flag } ${ selectedCountry.value }
-		</span>
-	`;
-	const context = getContext();
-	context.phoneCountryCode = selectedCountry.code;
-	context.countryPrefix = selectedCountry.value;
-	context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
-	asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
-};
+// const updateSelection = ( selectedDisplay, selectedCountry ) => {
+// 	selectedDisplay.innerHTML = `
+// 		<span>
+// 			${ selectedCountry.flag } ${ selectedCountry.value }
+// 		</span>
+// 	`;
+// 	const context = getContext();
+// 	context.phoneCountryCode = selectedCountry.code;
+// 	context.countryPrefix = selectedCountry.value;
+// 	context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
+// 	asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
+// };
 
 const { actions } = store( NAMESPACE, {
 	state: {
@@ -98,6 +98,10 @@ const { actions } = store( NAMESPACE, {
 			asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
 			context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
 		},
+		phoneComboboxToggle() {
+			const context = getContext();
+			context.comboboxOpen = ! context.comboboxOpen;
+		},
 	},
 	callbacks: {
 		initializeCountrySelector() {
@@ -117,197 +121,174 @@ const { actions } = store( NAMESPACE, {
 			if ( ! context.showCountrySelector ) {
 				return;
 			}
-
-			// Find the parent element with class jetpack-field__input-prefix
-			const parentElement = getElement().ref;
-
-			if ( ! parentElement ) {
-				return;
-			}
-
-			// Find the native select element
-			const nativeSelect = parentElement.querySelector( 'select' );
-			if ( ! nativeSelect ) {
-				return;
-			}
-
-			// Create the custom combobox container
-			const comboBox = document.createElement( 'div' );
-			comboBox.className = 'jetpack-custom-combobox';
-
-			// Create the display button
-			const displayButton = document.createElement( 'button' );
-			displayButton.type = 'button';
-			displayButton.className = 'jetpack-combobox-trigger';
-
-			// Create the dropdown arrow
-			const arrow = document.createElement( 'span' );
-			arrow.innerHTML = '▼';
-			arrow.className = 'jetpack-combobox-trigger-arrow';
-
-			// Create the selected value display
-			const selectedDisplay = document.createElement( 'span' );
-			selectedDisplay.className = 'jetpack-combobox-selected';
-
-			displayButton.appendChild( selectedDisplay );
-			displayButton.appendChild( arrow );
-
-			// Create the dropdown container
-			const dropdown = document.createElement( 'div' );
-			dropdown.className = 'jetpack-combobox-dropdown';
-
-			// Create the search input
-			const searchInput = document.createElement( 'input' );
-			searchInput.type = 'text';
-			searchInput.placeholder = 'Search countries...';
-			searchInput.className = 'jetpack-combobox-search';
-
-			// Create the options list
-			const optionsList = document.createElement( 'div' );
-			optionsList.className = 'jetpack-combobox-options';
-
-			dropdown.appendChild( searchInput );
-			dropdown.appendChild( optionsList );
-
-			// Assemble the combobox
-			comboBox.appendChild( displayButton );
-			comboBox.appendChild( dropdown );
-
-			// State for the combobox
-			let isOpen = false;
-			let filteredCountries = [ ...countries ];
-			let selectedCountry =
-				countries.find( country => country.code === context.defaultCountry ) || countries[ 0 ];
-
-			// Function to render options
-			const renderOptions = ( countriesToRender = filteredCountries ) => {
-				optionsList.innerHTML = '';
-
-				countriesToRender.forEach( country => {
-					const option = document.createElement( 'div' );
-					option.className = `jetpack-combobox-option ${
-						country.code === selectedCountry.code ? 'jetpack-combobox-option-selected' : ''
-					}`;
-
-					option.innerHTML = `
-						<span class="jetpack-combobox-option-icon">${ country.flag }</span>
-						<span class="jetpack-combobox-option-value">${ country.value }</span>
-						<span class="jetpack-combobox-option-description">${ country.country }</span>
-					`;
-
-					option.addEventListener( 'mouseenter', () => {
-						option.style.backgroundColor = '#f5f5f5';
-					} );
-
-					option.addEventListener( 'mouseleave', () => {
-						option.style.backgroundColor =
-							country.code === selectedCountry.code ? '#f0f0f0' : 'transparent';
-					} );
-
-					option.addEventListener(
-						'click',
-						withScope( () => {
-							selectedCountry = country;
-							updateSelection( selectedDisplay, selectedCountry );
-							closeDropdown();
-						} )
-					);
-
-					optionsList.appendChild( option );
-				} );
-			};
-
-			// Function to open dropdown
-			const openDropdown = withScope( () => {
-				isOpen = true;
-				dropdown.style.display = 'block';
-				arrow.style.transform = 'rotate(180deg)';
-				searchInput.focus();
-				renderOptions();
-			} );
-
-			// Function to close dropdown
-			const closeDropdown = () => {
-				isOpen = false;
-				dropdown.style.display = 'none';
-				arrow.style.transform = 'rotate(0deg)';
-				searchInput.value = '';
-				filteredCountries = [ ...countries ];
-			};
-
-			// Function to filter countries based on search
-			const filterCountries = searchTerm => {
-				const term = searchTerm.toLowerCase();
-				filteredCountries = countries.filter(
-					country =>
-						country.country.toLowerCase().includes( term ) ||
-						country.code.toLowerCase().includes( term ) ||
-						country.value.includes( term )
-				);
-				renderOptions( filteredCountries );
-			};
-
-			// Event listeners
-			displayButton.addEventListener( 'click', e => {
-				e.preventDefault();
-				e.stopPropagation();
-				if ( isOpen ) {
-					closeDropdown();
-				} else {
-					openDropdown();
-				}
-			} );
-
-			searchInput.addEventListener(
-				'input',
-				withScope( e => {
-					filterCountries( e.target.value );
-				} )
+			context.filteredCountries = countries.map( country => ( {
+				...country,
+				label: country.country + ' ' + country.flag + ' ' + country.value,
+				value: country.code,
+				selected: country.code === context.defaultCountry,
+			} ) );
+			context.selectedCountry = countries.find(
+				country => country.code === context.defaultCountry
 			);
-
-			searchInput.addEventListener(
-				'keydown',
-
-				withSyncEvent(
-					withScope( e => {
-						if ( e.key === 'Escape' ) {
-							closeDropdown();
-						} else if ( e.key === 'Enter' ) {
-							e.preventDefault();
-							// Select the first filtered option if available
-							if ( filteredCountries.length > 0 ) {
-								selectedCountry = filteredCountries[ 0 ];
-								updateSelection( selectedDisplay, selectedCountry );
-								closeDropdown();
-
-								// Focus on the next input (phone number input)
-								const phoneInput = parentElement.parentElement.querySelector( 'input[type="tel"]' );
-								if ( phoneInput ) {
-									phoneInput.focus();
-								}
-							}
-						}
-					} )
-				)
-			);
-
-			// Close dropdown when clicking outside
-			document.addEventListener( 'click', e => {
-				if ( ! comboBox.contains( e.target ) ) {
-					closeDropdown();
-				}
-			} );
-
-			// Initialize the display
-			updateSelection( selectedDisplay, selectedCountry );
-
-			// Hide the native select and replace with custom combobox
-			nativeSelect.style.display = 'none';
-			parentElement.appendChild( comboBox );
-
-			// Store reference for potential cleanup
-			nativeSelect.jetpackCustomComboBox = comboBox;
-			asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
+			context.selectedCountryDisplay = `${ context.selectedCountry.flag } ${ context.selectedCountry.value }`;
+			// // Find the parent element with class jetpack-field__input-prefix
+			// const parentElement = getElement().ref;
+			// if ( ! parentElement ) {
+			// 	return;
+			// }
+			// // Find the native select element
+			// const nativeSelect = parentElement.querySelector( 'select' );
+			// if ( ! nativeSelect ) {
+			// 	return;
+			// }
+			// // Create the custom combobox container
+			// const comboBox = document.createElement( 'div' );
+			// comboBox.className = 'jetpack-custom-combobox';
+			// // Create the display button
+			// const displayButton = document.createElement( 'button' );
+			// displayButton.type = 'button';
+			// displayButton.className = 'jetpack-combobox-trigger';
+			// // Create the dropdown arrow
+			// const arrow = document.createElement( 'span' );
+			// arrow.innerHTML = '▼';
+			// arrow.className = 'jetpack-combobox-trigger-arrow';
+			// // Create the selected value display
+			// const selectedDisplay = document.createElement( 'span' );
+			// selectedDisplay.className = 'jetpack-combobox-selected';
+			// displayButton.appendChild( selectedDisplay );
+			// displayButton.appendChild( arrow );
+			// // Create the dropdown container
+			// const dropdown = document.createElement( 'div' );
+			// dropdown.className = 'jetpack-combobox-dropdown';
+			// // Create the search input
+			// const searchInput = document.createElement( 'input' );
+			// searchInput.type = 'text';
+			// searchInput.placeholder = 'Search countries...';
+			// searchInput.className = 'jetpack-combobox-search';
+			// // Create the options list
+			// const optionsList = document.createElement( 'div' );
+			// optionsList.className = 'jetpack-combobox-options';
+			// dropdown.appendChild( searchInput );
+			// dropdown.appendChild( optionsList );
+			// // Assemble the combobox
+			// comboBox.appendChild( displayButton );
+			// comboBox.appendChild( dropdown );
+			// // State for the combobox
+			// let isOpen = false;
+			// let filteredCountries = [ ...countries ];
+			// let selectedCountry =
+			// 	countries.find( country => country.code === context.defaultCountry ) || countries[ 0 ];
+			// // Function to render options
+			// const renderOptions = ( countriesToRender = filteredCountries ) => {
+			// 	optionsList.innerHTML = '';
+			// 	countriesToRender.forEach( country => {
+			// 		const option = document.createElement( 'div' );
+			// 		option.className = `jetpack-combobox-option ${
+			// 			country.code === selectedCountry.code ? 'jetpack-combobox-option-selected' : ''
+			// 		}`;
+			// 		option.innerHTML = `
+			// 			<span class="jetpack-combobox-option-icon">${ country.flag }</span>
+			// 			<span class="jetpack-combobox-option-value">${ country.value }</span>
+			// 			<span class="jetpack-combobox-option-description">${ country.country }</span>
+			// 		`;
+			// 		option.addEventListener( 'mouseenter', () => {
+			// 			option.style.backgroundColor = '#f5f5f5';
+			// 		} );
+			// 		option.addEventListener( 'mouseleave', () => {
+			// 			option.style.backgroundColor =
+			// 				country.code === selectedCountry.code ? '#f0f0f0' : 'transparent';
+			// 		} );
+			// 		option.addEventListener(
+			// 			'click',
+			// 			withScope( () => {
+			// 				selectedCountry = country;
+			// 				updateSelection( selectedDisplay, selectedCountry );
+			// 				closeDropdown();
+			// 			} )
+			// 		);
+			// 		optionsList.appendChild( option );
+			// 	} );
+			// };
+			// // Function to open dropdown
+			// const openDropdown = withScope( () => {
+			// 	isOpen = true;
+			// 	dropdown.style.display = 'block';
+			// 	arrow.style.transform = 'rotate(180deg)';
+			// 	searchInput.focus();
+			// 	renderOptions();
+			// } );
+			// // Function to close dropdown
+			// const closeDropdown = () => {
+			// 	isOpen = false;
+			// 	dropdown.style.display = 'none';
+			// 	arrow.style.transform = 'rotate(0deg)';
+			// 	searchInput.value = '';
+			// 	filteredCountries = [ ...countries ];
+			// };
+			// // Function to filter countries based on search
+			// const filterCountries = searchTerm => {
+			// 	const term = searchTerm.toLowerCase();
+			// 	filteredCountries = countries.filter(
+			// 		country =>
+			// 			country.country.toLowerCase().includes( term ) ||
+			// 			country.code.toLowerCase().includes( term ) ||
+			// 			country.value.includes( term )
+			// 	);
+			// 	renderOptions( filteredCountries );
+			// };
+			// // Event listeners
+			// displayButton.addEventListener( 'click', e => {
+			// 	e.preventDefault();
+			// 	e.stopPropagation();
+			// 	if ( isOpen ) {
+			// 		closeDropdown();
+			// 	} else {
+			// 		openDropdown();
+			// 	}
+			// } );
+			// searchInput.addEventListener(
+			// 	'input',
+			// 	withScope( e => {
+			// 		filterCountries( e.target.value );
+			// 	} )
+			// );
+			// searchInput.addEventListener(
+			// 	'keydown',
+			// 	withSyncEvent(
+			// 		withScope( e => {
+			// 			if ( e.key === 'Escape' ) {
+			// 				closeDropdown();
+			// 			} else if ( e.key === 'Enter' ) {
+			// 				e.preventDefault();
+			// 				// Select the first filtered option if available
+			// 				if ( filteredCountries.length > 0 ) {
+			// 					selectedCountry = filteredCountries[ 0 ];
+			// 					updateSelection( selectedDisplay, selectedCountry );
+			// 					closeDropdown();
+			// 					// Focus on the next input (phone number input)
+			// 					const phoneInput = parentElement.parentElement.querySelector( 'input[type="tel"]' );
+			// 					if ( phoneInput ) {
+			// 						phoneInput.focus();
+			// 					}
+			// 				}
+			// 			}
+			// 		} )
+			// 	)
+			// );
+			// // Close dropdown when clicking outside
+			// document.addEventListener( 'click', e => {
+			// 	if ( ! comboBox.contains( e.target ) ) {
+			// 		closeDropdown();
+			// 	}
+			// } );
+			// // Initialize the display
+			// updateSelection( selectedDisplay, selectedCountry );
+			// // Hide the native select and replace with custom combobox
+			// nativeSelect.style.display = 'none';
+			// parentElement.appendChild( comboBox );
+			// // Store reference for potential cleanup
+			// nativeSelect.jetpackCustomComboBox = comboBox;
+			// asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
 		},
 	},
 } );

From f100c2ee3b2119bc24918797efd63be57ca98214 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 29 Aug 2025 13:12:55 -0300
Subject: [PATCH 10/51] fully working, needs cleanup and styling

---
 .../contact-form/class-contact-form-field.php | 309 ++++++++++++++++--
 .../forms/src/contact-form/css/combobox.scss  |  11 +-
 .../src/contact-form/css/phone-field.scss     |   1 +
 .../forms/src/modules/field-phone/view.js     | 134 ++++++--
 4 files changed, 405 insertions(+), 50 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 8f67d33d5ff04..1360d557017e7 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1003,31 +1003,39 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 			$value = '';
 		}
 
+		$translated_countries = $this->get_translatable_countries();
+		$global_config        = array(
+			'i18n' => array(
+				'countryNames' => $translated_countries,
+			),
+		);
+		wp_interactivity_config( 'jetpack/field-phone', $global_config );
 		ob_start();
 		?>
 		<div class="jetpack-field__input-phone-wrapper <?php echo esc_attr( $this->get_attribute( 'stylevariationclasses' ) ); ?>"
 			style="<?php echo ( ! empty( $this->field_styles ) && is_string( $this->field_styles ) ? esc_attr( $this->field_styles ) : '' ); ?>"
 			data-wp-on--jetpack-form-reset='actions.phoneResetHandler'
+			data-wp-init="callbacks.initializePhoneField"
 			<?php
 			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- function is supposed to work this way
 			echo wp_interactivity_data_wp_context(
 				array(
-					'fieldId'                => $id,
-					'defaultCountry'         => $default_country,
-					'showCountrySelector'    => $this->get_attribute( 'showcountryselector' ),
+					'fieldId'             => $id,
+					'defaultCountry'      => $default_country,
+					'showCountrySelector' => $this->get_attribute( 'showcountryselector' ),
 					// dynamic
-					'phoneNumber'            => '',
-					'phoneCountryCode'       => $default_country,
-					'countryList'            => array(),
-					'fullPhoneNumber'        => '',
-					'countryPrefix'          => '',
+					'phoneNumber'         => '',
+					'phoneCountryCode'    => $default_country,
+					'countryList'         => array(),
+					'fullPhoneNumber'     => '',
+					'countryPrefix'       => '',
 					// combobox state
-					'useCombobox'            => true,
-					'comboboxOpen'           => false,
-					'searchTerm'             => '',
-					'filteredCountries'      => array(),
-					'selectedCountryIndex'   => 0,
-					'selectedCountryDisplay' => '',
+					'useCombobox'         => true,
+					'comboboxOpen'        => false,
+					'searchTerm'          => '',
+					'allCountries'        => array(),
+					'filteredCountries'   => array(),
+					'selectedCountry'     => array(),
 				)
 			);
 			?>
@@ -1041,31 +1049,32 @@ class="jetpack-combobox-trigger"
 							data-wp-bind--aria-expanded="context.comboboxOpen">
 							<span 
 								class="jetpack-combobox-selected"
-								data-wp-text="context.selectedCountryDisplay"></span>
+								data-wp-text="context.selectedCountry.flag"></span>
 							<span 
 								class="jetpack-combobox-trigger-arrow"
 								data-wp-class--is-open="context.comboboxOpen">▼</span>
+							<span 
+								class="jetpack-combobox-selected"
+								data-wp-text="context.selectedCountry.value"></span>
 						</button>
 						<div 
 							class="jetpack-combobox-dropdown"
 							data-wp-bind--hidden="!context.comboboxOpen">
-							<input 
+							<input
 								class="jetpack-combobox-search" 
 								type="text" 
-								placeholder="Search countries..."
-								data-wp-bind--value="context.searchTerm"
-								data-wp-on--input="actions.onComboboxSearch"
-								data-wp-on--keydown="actions.onComboboxKeydown">
+								placeholder="<?php echo esc_attr__( 'Search countries...', 'jetpack-forms' ); ?>"
+								data-wp-on--input="actions.phoneComboboxInputHandler"
+								data-wp-on--keydown="actions.phoneComboboxKeydownHandler">
 							<div class="jetpack-combobox-options">
 								<template
 								data-wp-each--filtered="context.filteredCountries"
 								data-wp-each-key="context.filtered.code">
 									<div 
 										class="jetpack-combobox-option"
+										data-wp-key="context.filtered.code"
 										data-wp-class--jetpack-combobox-option-selected="context.filtered.selected"
-										data-wp-on--click="actions.selectCountryOption"
-										data-wp-on--mouseenter="actions.highlightOption"
-										data-wp-on--mouseleave="actions.unhighlightOption">
+										data-wp-on--click="actions.phoneCountryChangeHandler">
 										<span class="jetpack-combobox-option-icon" data-wp-text="context.filtered.flag"></span>
 										<span class="jetpack-combobox-option-value" data-wp-text="context.filtered.value"></span>
 										<span class="jetpack-combobox-option-description" data-wp-text="context.filtered.country"></span>
@@ -1105,8 +1114,9 @@ class="jetpack-combobox-option"
 					data-wp-bind--aria-invalid='state.fieldHasErrors'
 					data-wp-bind--value='context.phoneNumber'
 					aria-errormessage="<?php echo esc_attr( $id ); ?>-phone-error-message"
-					data-wp-on--input='actions.onPhoneNumberChange'
+					data-wp-on--input='actions.phoneNumberInputHandler'
 					data-wp-on--blur='actions.onFieldBlur'
+					data-wp-on--focus='actions.phoneNumberFocusHandler'
 					data-wp-class--has-value='state.hasFieldValue'
 					/>
 				<input type="hidden"
@@ -2806,6 +2816,257 @@ private function enqueue_slider_field_assets() {
 		);
 	}
 
+	/**
+	 * Gets an array of translatable country names indexed by their two-letter country codes.
+	 *
+	 * @since $$next-version$$
+	 *
+	 * @return array Array of country names with two-letter country codes as keys.
+	 */
+	public function get_translatable_countries() {
+		return array(
+			'AF' => __( 'Afghanistan', 'jetpack-forms' ),
+			'AL' => __( 'Albania', 'jetpack-forms' ),
+			'DZ' => __( 'Algeria', 'jetpack-forms' ),
+			'AS' => __( 'American Samoa', 'jetpack-forms' ),
+			'AD' => __( 'Andorra', 'jetpack-forms' ),
+			'AO' => __( 'Angola', 'jetpack-forms' ),
+			'AI' => __( 'Anguilla', 'jetpack-forms' ),
+			'AG' => __( 'Antigua and Barbuda', 'jetpack-forms' ),
+			'AR' => __( 'Argentina', 'jetpack-forms' ),
+			'AM' => __( 'Armenia', 'jetpack-forms' ),
+			'AW' => __( 'Aruba', 'jetpack-forms' ),
+			'AU' => __( 'Australia', 'jetpack-forms' ),
+			'AT' => __( 'Austria', 'jetpack-forms' ),
+			'AZ' => __( 'Azerbaijan', 'jetpack-forms' ),
+			'BS' => __( 'Bahamas', 'jetpack-forms' ),
+			'BH' => __( 'Bahrain', 'jetpack-forms' ),
+			'BD' => __( 'Bangladesh', 'jetpack-forms' ),
+			'BB' => __( 'Barbados', 'jetpack-forms' ),
+			'BY' => __( 'Belarus', 'jetpack-forms' ),
+			'BE' => __( 'Belgium', 'jetpack-forms' ),
+			'BZ' => __( 'Belize', 'jetpack-forms' ),
+			'BJ' => __( 'Benin', 'jetpack-forms' ),
+			'BM' => __( 'Bermuda', 'jetpack-forms' ),
+			'BT' => __( 'Bhutan', 'jetpack-forms' ),
+			'BO' => __( 'Bolivia', 'jetpack-forms' ),
+			'BA' => __( 'Bosnia and Herzegovina', 'jetpack-forms' ),
+			'BW' => __( 'Botswana', 'jetpack-forms' ),
+			'BR' => __( 'Brazil', 'jetpack-forms' ),
+			'IO' => __( 'British Indian Ocean Territory', 'jetpack-forms' ),
+			'VG' => __( 'British Virgin Islands', 'jetpack-forms' ),
+			'BN' => __( 'Brunei', 'jetpack-forms' ),
+			'BG' => __( 'Bulgaria', 'jetpack-forms' ),
+			'BF' => __( 'Burkina Faso', 'jetpack-forms' ),
+			'BI' => __( 'Burundi', 'jetpack-forms' ),
+			'KH' => __( 'Cambodia', 'jetpack-forms' ),
+			'CM' => __( 'Cameroon', 'jetpack-forms' ),
+			'CA' => __( 'Canada', 'jetpack-forms' ),
+			'CV' => __( 'Cape Verde', 'jetpack-forms' ),
+			'KY' => __( 'Cayman Islands', 'jetpack-forms' ),
+			'CF' => __( 'Central African Republic', 'jetpack-forms' ),
+			'TD' => __( 'Chad', 'jetpack-forms' ),
+			'CL' => __( 'Chile', 'jetpack-forms' ),
+			'CN' => __( 'China', 'jetpack-forms' ),
+			'CX' => __( 'Christmas Island', 'jetpack-forms' ),
+			'CC' => __( 'Cocos (Keeling) Islands', 'jetpack-forms' ),
+			'CO' => __( 'Colombia', 'jetpack-forms' ),
+			'KM' => __( 'Comoros', 'jetpack-forms' ),
+			'CG' => __( 'Congo - Brazzaville', 'jetpack-forms' ),
+			'CD' => __( 'Congo - Kinshasa', 'jetpack-forms' ),
+			'CK' => __( 'Cook Islands', 'jetpack-forms' ),
+			'CR' => __( 'Costa Rica', 'jetpack-forms' ),
+			'HR' => __( 'Croatia', 'jetpack-forms' ),
+			'CU' => __( 'Cuba', 'jetpack-forms' ),
+			'CY' => __( 'Cyprus', 'jetpack-forms' ),
+			'CZ' => __( 'Czech Republic', 'jetpack-forms' ),
+			'CI' => __( "Côte d'Ivoire", 'jetpack-forms' ),
+			'DK' => __( 'Denmark', 'jetpack-forms' ),
+			'DJ' => __( 'Djibouti', 'jetpack-forms' ),
+			'DM' => __( 'Dominica', 'jetpack-forms' ),
+			'DO' => __( 'Dominican Republic', 'jetpack-forms' ),
+			'EC' => __( 'Ecuador', 'jetpack-forms' ),
+			'EG' => __( 'Egypt', 'jetpack-forms' ),
+			'SV' => __( 'El Salvador', 'jetpack-forms' ),
+			'GQ' => __( 'Equatorial Guinea', 'jetpack-forms' ),
+			'ER' => __( 'Eritrea', 'jetpack-forms' ),
+			'EE' => __( 'Estonia', 'jetpack-forms' ),
+			'SZ' => __( 'Eswatini', 'jetpack-forms' ),
+			'ET' => __( 'Ethiopia', 'jetpack-forms' ),
+			'FK' => __( 'Falkland Islands', 'jetpack-forms' ),
+			'FO' => __( 'Faroe Islands', 'jetpack-forms' ),
+			'FJ' => __( 'Fiji', 'jetpack-forms' ),
+			'FI' => __( 'Finland', 'jetpack-forms' ),
+			'FR' => __( 'France', 'jetpack-forms' ),
+			'GF' => __( 'French Guiana', 'jetpack-forms' ),
+			'PF' => __( 'French Polynesia', 'jetpack-forms' ),
+			'GA' => __( 'Gabon', 'jetpack-forms' ),
+			'GM' => __( 'Gambia', 'jetpack-forms' ),
+			'GE' => __( 'Georgia', 'jetpack-forms' ),
+			'DE' => __( 'Germany', 'jetpack-forms' ),
+			'GH' => __( 'Ghana', 'jetpack-forms' ),
+			'GI' => __( 'Gibraltar', 'jetpack-forms' ),
+			'GR' => __( 'Greece', 'jetpack-forms' ),
+			'GL' => __( 'Greenland', 'jetpack-forms' ),
+			'GD' => __( 'Grenada', 'jetpack-forms' ),
+			'GP' => __( 'Guadeloupe', 'jetpack-forms' ),
+			'GU' => __( 'Guam', 'jetpack-forms' ),
+			'GT' => __( 'Guatemala', 'jetpack-forms' ),
+			'GG' => __( 'Guernsey', 'jetpack-forms' ),
+			'GN' => __( 'Guinea', 'jetpack-forms' ),
+			'GW' => __( 'Guinea-Bissau', 'jetpack-forms' ),
+			'GY' => __( 'Guyana', 'jetpack-forms' ),
+			'HT' => __( 'Haiti', 'jetpack-forms' ),
+			'HN' => __( 'Honduras', 'jetpack-forms' ),
+			'HK' => __( 'Hong Kong', 'jetpack-forms' ),
+			'HU' => __( 'Hungary', 'jetpack-forms' ),
+			'IS' => __( 'Iceland', 'jetpack-forms' ),
+			'IN' => __( 'India', 'jetpack-forms' ),
+			'ID' => __( 'Indonesia', 'jetpack-forms' ),
+			'IR' => __( 'Iran', 'jetpack-forms' ),
+			'IQ' => __( 'Iraq', 'jetpack-forms' ),
+			'IE' => __( 'Ireland', 'jetpack-forms' ),
+			'IM' => __( 'Isle of Man', 'jetpack-forms' ),
+			'IL' => __( 'Israel', 'jetpack-forms' ),
+			'IT' => __( 'Italy', 'jetpack-forms' ),
+			'JM' => __( 'Jamaica', 'jetpack-forms' ),
+			'JP' => __( 'Japan', 'jetpack-forms' ),
+			'JE' => __( 'Jersey', 'jetpack-forms' ),
+			'JO' => __( 'Jordan', 'jetpack-forms' ),
+			'KZ' => __( 'Kazakhstan', 'jetpack-forms' ),
+			'KE' => __( 'Kenya', 'jetpack-forms' ),
+			'KI' => __( 'Kiribati', 'jetpack-forms' ),
+			'XK' => __( 'Kosovo', 'jetpack-forms' ),
+			'KW' => __( 'Kuwait', 'jetpack-forms' ),
+			'KG' => __( 'Kyrgyzstan', 'jetpack-forms' ),
+			'LA' => __( 'Laos', 'jetpack-forms' ),
+			'LV' => __( 'Latvia', 'jetpack-forms' ),
+			'LB' => __( 'Lebanon', 'jetpack-forms' ),
+			'LS' => __( 'Lesotho', 'jetpack-forms' ),
+			'LR' => __( 'Liberia', 'jetpack-forms' ),
+			'LY' => __( 'Libya', 'jetpack-forms' ),
+			'LI' => __( 'Liechtenstein', 'jetpack-forms' ),
+			'LT' => __( 'Lithuania', 'jetpack-forms' ),
+			'LU' => __( 'Luxembourg', 'jetpack-forms' ),
+			'MO' => __( 'Macao', 'jetpack-forms' ),
+			'MG' => __( 'Madagascar', 'jetpack-forms' ),
+			'MW' => __( 'Malawi', 'jetpack-forms' ),
+			'MY' => __( 'Malaysia', 'jetpack-forms' ),
+			'MV' => __( 'Maldives', 'jetpack-forms' ),
+			'ML' => __( 'Mali', 'jetpack-forms' ),
+			'MT' => __( 'Malta', 'jetpack-forms' ),
+			'MH' => __( 'Marshall Islands', 'jetpack-forms' ),
+			'MQ' => __( 'Martinique', 'jetpack-forms' ),
+			'MR' => __( 'Mauritania', 'jetpack-forms' ),
+			'MU' => __( 'Mauritius', 'jetpack-forms' ),
+			'YT' => __( 'Mayotte', 'jetpack-forms' ),
+			'MX' => __( 'Mexico', 'jetpack-forms' ),
+			'FM' => __( 'Micronesia', 'jetpack-forms' ),
+			'MD' => __( 'Moldova', 'jetpack-forms' ),
+			'MC' => __( 'Monaco', 'jetpack-forms' ),
+			'MN' => __( 'Mongolia', 'jetpack-forms' ),
+			'ME' => __( 'Montenegro', 'jetpack-forms' ),
+			'MS' => __( 'Montserrat', 'jetpack-forms' ),
+			'MA' => __( 'Morocco', 'jetpack-forms' ),
+			'MZ' => __( 'Mozambique', 'jetpack-forms' ),
+			'MM' => __( 'Myanmar', 'jetpack-forms' ),
+			'NA' => __( 'Namibia', 'jetpack-forms' ),
+			'NR' => __( 'Nauru', 'jetpack-forms' ),
+			'NP' => __( 'Nepal', 'jetpack-forms' ),
+			'NL' => __( 'Netherlands', 'jetpack-forms' ),
+			'NC' => __( 'New Caledonia', 'jetpack-forms' ),
+			'NZ' => __( 'New Zealand', 'jetpack-forms' ),
+			'NI' => __( 'Nicaragua', 'jetpack-forms' ),
+			'NE' => __( 'Niger', 'jetpack-forms' ),
+			'NG' => __( 'Nigeria', 'jetpack-forms' ),
+			'NU' => __( 'Niue', 'jetpack-forms' ),
+			'NF' => __( 'Norfolk Island', 'jetpack-forms' ),
+			'KP' => __( 'North Korea', 'jetpack-forms' ),
+			'MK' => __( 'North Macedonia', 'jetpack-forms' ),
+			'MP' => __( 'Northern Mariana Islands', 'jetpack-forms' ),
+			'NO' => __( 'Norway', 'jetpack-forms' ),
+			'OM' => __( 'Oman', 'jetpack-forms' ),
+			'PK' => __( 'Pakistan', 'jetpack-forms' ),
+			'PW' => __( 'Palau', 'jetpack-forms' ),
+			'PS' => __( 'Palestine', 'jetpack-forms' ),
+			'PA' => __( 'Panama', 'jetpack-forms' ),
+			'PG' => __( 'Papua New Guinea', 'jetpack-forms' ),
+			'PY' => __( 'Paraguay', 'jetpack-forms' ),
+			'PE' => __( 'Peru', 'jetpack-forms' ),
+			'PH' => __( 'Philippines', 'jetpack-forms' ),
+			'PN' => __( 'Pitcairn Islands', 'jetpack-forms' ),
+			'PL' => __( 'Poland', 'jetpack-forms' ),
+			'PT' => __( 'Portugal', 'jetpack-forms' ),
+			'PR' => __( 'Puerto Rico', 'jetpack-forms' ),
+			'QA' => __( 'Qatar', 'jetpack-forms' ),
+			'RO' => __( 'Romania', 'jetpack-forms' ),
+			'RU' => __( 'Russia', 'jetpack-forms' ),
+			'RW' => __( 'Rwanda', 'jetpack-forms' ),
+			'RE' => __( 'Réunion', 'jetpack-forms' ),
+			'BL' => __( 'Saint Barthélemy', 'jetpack-forms' ),
+			'SH' => __( 'Saint Helena', 'jetpack-forms' ),
+			'KN' => __( 'Saint Kitts and Nevis', 'jetpack-forms' ),
+			'LC' => __( 'Saint Lucia', 'jetpack-forms' ),
+			'MF' => __( 'Saint Martin', 'jetpack-forms' ),
+			'PM' => __( 'Saint Pierre and Miquelon', 'jetpack-forms' ),
+			'VC' => __( 'Saint Vincent and the Grenadines', 'jetpack-forms' ),
+			'WS' => __( 'Samoa', 'jetpack-forms' ),
+			'SM' => __( 'San Marino', 'jetpack-forms' ),
+			'SA' => __( 'Saudi Arabia', 'jetpack-forms' ),
+			'SN' => __( 'Senegal', 'jetpack-forms' ),
+			'RS' => __( 'Serbia', 'jetpack-forms' ),
+			'SC' => __( 'Seychelles', 'jetpack-forms' ),
+			'SL' => __( 'Sierra Leone', 'jetpack-forms' ),
+			'SG' => __( 'Singapore', 'jetpack-forms' ),
+			'SK' => __( 'Slovakia', 'jetpack-forms' ),
+			'SI' => __( 'Slovenia', 'jetpack-forms' ),
+			'SB' => __( 'Solomon Islands', 'jetpack-forms' ),
+			'SO' => __( 'Somalia', 'jetpack-forms' ),
+			'ZA' => __( 'South Africa', 'jetpack-forms' ),
+			'GS' => __( 'South Georgia and the South Sandwich Islands', 'jetpack-forms' ),
+			'KR' => __( 'South Korea', 'jetpack-forms' ),
+			'ES' => __( 'Spain', 'jetpack-forms' ),
+			'LK' => __( 'Sri Lanka', 'jetpack-forms' ),
+			'SD' => __( 'Sudan', 'jetpack-forms' ),
+			'SR' => __( 'Suriname', 'jetpack-forms' ),
+			'SJ' => __( 'Svalbard and Jan Mayen', 'jetpack-forms' ),
+			'SE' => __( 'Sweden', 'jetpack-forms' ),
+			'CH' => __( 'Switzerland', 'jetpack-forms' ),
+			'SY' => __( 'Syria', 'jetpack-forms' ),
+			'ST' => __( 'São Tomé and Príncipe', 'jetpack-forms' ),
+			'TW' => __( 'Taiwan', 'jetpack-forms' ),
+			'TJ' => __( 'Tajikistan', 'jetpack-forms' ),
+			'TZ' => __( 'Tanzania', 'jetpack-forms' ),
+			'TH' => __( 'Thailand', 'jetpack-forms' ),
+			'TL' => __( 'Timor-Leste', 'jetpack-forms' ),
+			'TG' => __( 'Togo', 'jetpack-forms' ),
+			'TK' => __( 'Tokelau', 'jetpack-forms' ),
+			'TO' => __( 'Tonga', 'jetpack-forms' ),
+			'TT' => __( 'Trinidad and Tobago', 'jetpack-forms' ),
+			'TN' => __( 'Tunisia', 'jetpack-forms' ),
+			'TR' => __( 'Turkey', 'jetpack-forms' ),
+			'TM' => __( 'Turkmenistan', 'jetpack-forms' ),
+			'TC' => __( 'Turks and Caicos Islands', 'jetpack-forms' ),
+			'TV' => __( 'Tuvalu', 'jetpack-forms' ),
+			'VI' => __( 'U.S. Virgin Islands', 'jetpack-forms' ),
+			'UG' => __( 'Uganda', 'jetpack-forms' ),
+			'UA' => __( 'Ukraine', 'jetpack-forms' ),
+			'AE' => __( 'United Arab Emirates', 'jetpack-forms' ),
+			'GB' => __( 'United Kingdom', 'jetpack-forms' ),
+			'US' => __( 'United States', 'jetpack-forms' ),
+			'UY' => __( 'Uruguay', 'jetpack-forms' ),
+			'UZ' => __( 'Uzbekistan', 'jetpack-forms' ),
+			'VU' => __( 'Vanuatu', 'jetpack-forms' ),
+			'VA' => __( 'Vatican City', 'jetpack-forms' ),
+			'VE' => __( 'Venezuela', 'jetpack-forms' ),
+			'VN' => __( 'Vietnam', 'jetpack-forms' ),
+			'WF' => __( 'Wallis and Futuna', 'jetpack-forms' ),
+			'YE' => __( 'Yemen', 'jetpack-forms' ),
+			'ZM' => __( 'Zambia', 'jetpack-forms' ),
+			'ZW' => __( 'Zimbabwe', 'jetpack-forms' ),
+		);
+	}
+
 	/**
 	 * Enqueues scripts and styles needed for the slider field.
 	 *
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 64eb2a646cc91..d99ea7f65ffb5 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -1,6 +1,7 @@
 // Custom Combobox Styles for Country Selector
 .jetpack-custom-combobox {
 	position: relative;
+	letter-spacing: normal; // don't let input attributes rule over this
 
 	.jetpack-combobox-trigger {
 		width: 100%;
@@ -31,11 +32,11 @@
 		}
 
 		.jetpack-combobox-selected {
-			flex: 1;
-			text-align: left;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+			// flex: 1;
+			// text-align: left;
+			// overflow: hidden;
+			// text-overflow: ellipsis;
+			// white-space: nowrap;
 		}
 	}
 
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 0f16e523fc260..c1deb68c110c7 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -17,6 +17,7 @@
 		font-size: var(--jetpack--contact-form--font-size);
 		padding: var(--jetpack--contact-form--input-padding);
 		line-height: var(--jetpack--contact-form--line-height);
+		align-items: center;
 
 		&:has(.jetpack-field__input-element:focus) {
 			outline-width: 2px;
diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 2f69767c2dc50..c82ea950fda90 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -1,23 +1,28 @@
-import { store, getContext, getElement, withSyncEvent, withScope } from '@wordpress/interactivity';
+import { store, getContext, getConfig, getElement, withSyncEvent } from '@wordpress/interactivity';
 import parsePhoneNumber, { AsYouType } from 'libphonenumber-js';
 import { countries } from '../../blocks/field-telephone/country-list';
 import { isEmptyValue } from '../../contact-form/js/validate-helper';
 const NAMESPACE = 'jetpack/form';
 
 const asYouTypes = {};
-
-// const updateSelection = ( selectedDisplay, selectedCountry ) => {
-// 	selectedDisplay.innerHTML = `
-// 		<span>
-// 			${ selectedCountry.flag } ${ selectedCountry.value }
-// 		</span>
-// 	`;
-// 	const context = getContext();
-// 	context.phoneCountryCode = selectedCountry.code;
-// 	context.countryPrefix = selectedCountry.value;
-// 	context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
-// 	asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
-// };
+const phoneInputRefs = {};
+const searchInputRefs = {};
+const optionsListRefs = {};
+const updateSelection = selectedCountry => {
+	const context = getContext();
+	context.phoneCountryCode = selectedCountry.code;
+	context.countryPrefix = selectedCountry.value;
+	context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
+	asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
+	context.filteredCountries = context.filteredCountries.map( country => ( {
+		...country,
+		selected: country.code === selectedCountry.code,
+	} ) );
+	context.allCountries = context.allCountries.map( country => ( {
+		...country,
+		selected: country.code === selectedCountry.code,
+	} ) );
+};
 
 const { actions } = store( NAMESPACE, {
 	state: {
@@ -33,7 +38,7 @@ const { actions } = store( NAMESPACE, {
 					// No need to validate anything.
 					return 'yes';
 				}
-				console.log( 'context.fullPhoneNumber', context.fullPhoneNumber );
+
 				// from this point on, we discard the value as we
 				// use our internal full phone number state getter:
 				value = context.fullPhoneNumber;
@@ -89,7 +94,6 @@ const { actions } = store( NAMESPACE, {
 			actions.updateField( fieldId, value );
 		},
 		onPhoneCountryChange( event ) {
-			console.log( 'onPhoneCountryChange', event );
 			const context = getContext();
 			context.phoneCountryCode = event?.target?.value || context.defaultCountry;
 			context.countryPrefix = countries.find(
@@ -98,9 +102,83 @@ const { actions } = store( NAMESPACE, {
 			asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
 			context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
 		},
+		phoneNumberInputHandler( event ) {
+			const context = getContext();
+			const fieldId = context.fieldId;
+			const value = event.target.value;
+			if ( ! context.showCountrySelector ) {
+				context.phoneNumber = context.fullPhoneNumber = value;
+				return;
+			}
+			const groomedValue = value.indexOf( '00' ) === 0 ? '+' + value.slice( 2 ) : value;
+
+			asYouTypes[ fieldId ].reset();
+			asYouTypes[ fieldId ].input( groomedValue );
+			if ( asYouTypes[ fieldId ].getCountry() ) {
+				const countryCode = asYouTypes[ fieldId ].getCountry();
+				context.phoneNumber = asYouTypes[ fieldId ].getNationalNumber();
+				context.selectedCountry = context.allCountries.find(
+					country => country.code === countryCode
+				);
+				updateSelection( context.selectedCountry );
+			} else {
+				context.phoneNumber = value;
+			}
+
+			actions.updateField( fieldId, value );
+		},
+		phoneCountryChangeHandler() {
+			const context = getContext();
+			// this context.filtered is from the template iterator
+			context.selectedCountry = { ...context.filtered };
+			updateSelection( context.selectedCountry );
+			context.comboboxOpen = false;
+			phoneInputRefs[ context.fieldId ]?.focus?.();
+		},
+		phoneComboboxInputHandler( event ) {
+			const context = getContext();
+			const searchTerm = event.target.value;
+			context.filteredCountries = context.allCountries.filter(
+				country =>
+					country.country.toLowerCase().includes( searchTerm ) ||
+					country.code.toLowerCase().includes( searchTerm ) ||
+					country.value.includes( searchTerm )
+			);
+			optionsListRefs[ context.fieldId ]
+				.querySelector( '.jetpack-combobox-option-selected' )
+				?.scrollIntoView?.( { block: 'nearest', container: 'nearest', behavior: 'instant' } );
+		},
+		phoneComboboxKeydownHandler: withSyncEvent( event => {
+			const context = getContext();
+			if ( event.key === 'Escape' ) {
+				context.comboboxOpen = false;
+			} else if ( event.key === 'Enter' ) {
+				event.preventDefault();
+				// Select the first filtered option if available
+				if ( event.target.value && context.filteredCountries.length > 0 ) {
+					context.selectedCountry = context.filteredCountries[ 0 ];
+					updateSelection( context.selectedCountry );
+					context.comboboxOpen = false;
+					// Focus on the ref input
+					phoneInputRefs[ context.fieldId ]?.focus?.();
+				}
+			}
+		} ),
+		phoneNumberFocusHandler() {
+			const context = getContext();
+			context.comboboxOpen = false;
+		},
 		phoneComboboxToggle() {
 			const context = getContext();
 			context.comboboxOpen = ! context.comboboxOpen;
+			if ( context.comboboxOpen ) {
+				setTimeout( () => {
+					searchInputRefs[ context.fieldId ]?.focus?.();
+					optionsListRefs[ context.fieldId ]
+						.querySelector( '.jetpack-combobox-option-selected' )
+						?.scrollIntoView?.( { block: 'nearest', container: 'nearest' } );
+				}, 0 );
+			}
 		},
 	},
 	callbacks: {
@@ -116,21 +194,35 @@ const { actions } = store( NAMESPACE, {
 			}
 			asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
 		},
+		initializePhoneField() {
+			const element = getElement().ref;
+			const context = getContext();
+			// store refs for quick access later and less intensive dom scouting
+			phoneInputRefs[ context.fieldId ] = element.querySelector( 'input[type="tel"]' );
+			searchInputRefs[ context.fieldId ] = element.parentElement.querySelector(
+				'.jetpack-combobox-search'
+			);
+			optionsListRefs[ context.fieldId ] = element.parentElement.querySelector(
+				'.jetpack-combobox-options'
+			);
+		},
 		initializeCustomComboBox() {
 			const context = getContext();
 			if ( ! context.showCountrySelector ) {
 				return;
 			}
-			context.filteredCountries = countries.map( country => ( {
+			const config = getConfig( 'jetpack/field-phone' );
+			context.allCountries = countries.map( country => ( {
 				...country,
-				label: country.country + ' ' + country.flag + ' ' + country.value,
-				value: country.code,
+				country: config?.i18n?.countryNames?.[ country.code ] || '',
 				selected: country.code === context.defaultCountry,
 			} ) );
-			context.selectedCountry = countries.find(
+			context.filteredCountries = [ ...context.allCountries ];
+			context.selectedCountry = context.filteredCountries.find(
 				country => country.code === context.defaultCountry
 			);
-			context.selectedCountryDisplay = `${ context.selectedCountry.flag } ${ context.selectedCountry.value }`;
+			asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
+
 			// // Find the parent element with class jetpack-field__input-prefix
 			// const parentElement = getElement().ref;
 			// if ( ! parentElement ) {

From 5c16be18e9941d472dbe1300ddafc4032f830d8e Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 14:24:17 -0300
Subject: [PATCH 11/51] clean up code and styles

---
 .../contact-form/class-contact-form-field.php |  17 --
 .../forms/src/contact-form/css/combobox.scss  |   9 -
 .../forms/src/modules/field-phone/view.js     | 171 ------------------
 3 files changed, 197 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 1360d557017e7..f86e2de675149 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1026,7 +1026,6 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 					// dynamic
 					'phoneNumber'         => '',
 					'phoneCountryCode'    => $default_country,
-					'countryList'         => array(),
 					'fullPhoneNumber'     => '',
 					'countryPrefix'       => '',
 					// combobox state
@@ -1083,22 +1082,6 @@ class="jetpack-combobox-option"
 							</div>
 						</div>
 					</div>
-					<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- it's escaped in calling function ?>
-					<select <?php echo $class; ?>
-						data-wp-bind--hidden="context.useCombobox"
-						data-wp-bind--disabled='state.isSubmitting'
-						data-wp-on--change="actions.onPhoneCountryChange"
-						data-wp-bind--value="context.phoneCountryCode"
-						data-wp-on--blur='actions.onFieldBlur'>
-						<template
-							data-wp-each--country="context.countryList"
-							data-wp-each-key="context.country.code">
-							<option
-								data-wp-bind--value="context.country.value"
-								data-wp-bind--selected="context.country.selected"
-								data-wp-text="context.country.label"></option>
-						</template>
-					</select>
 				</div>
 				<input
 					<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- both are escaped in calling function ?>
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index d99ea7f65ffb5..aac4908a1d77f 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -24,20 +24,11 @@
 		.jetpack-combobox-trigger-arrow {
 			font-size: 10px;
 			transition: transform 0.2s;
-			color: #666;
 
 			&.is-open {
 				transform: rotate(180deg);
 			}
 		}
-
-		.jetpack-combobox-selected {
-			// flex: 1;
-			// text-align: left;
-			// overflow: hidden;
-			// text-overflow: ellipsis;
-			// white-space: nowrap;
-		}
 	}
 
 	.jetpack-combobox-dropdown {
diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index c82ea950fda90..a3b27750d0354 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -182,18 +182,6 @@ const { actions } = store( NAMESPACE, {
 		},
 	},
 	callbacks: {
-		initializeCountrySelector() {
-			const context = getContext();
-			if ( context.showCountrySelector ) {
-				context.countryList = countries.map( country => ( {
-					...country,
-					label: country.country + ' ' + country.flag + ' ' + country.value,
-					value: country.code,
-					selected: country.code === context.defaultCountry,
-				} ) );
-			}
-			asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
-		},
 		initializePhoneField() {
 			const element = getElement().ref;
 			const context = getContext();
@@ -222,165 +210,6 @@ const { actions } = store( NAMESPACE, {
 				country => country.code === context.defaultCountry
 			);
 			asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
-
-			// // Find the parent element with class jetpack-field__input-prefix
-			// const parentElement = getElement().ref;
-			// if ( ! parentElement ) {
-			// 	return;
-			// }
-			// // Find the native select element
-			// const nativeSelect = parentElement.querySelector( 'select' );
-			// if ( ! nativeSelect ) {
-			// 	return;
-			// }
-			// // Create the custom combobox container
-			// const comboBox = document.createElement( 'div' );
-			// comboBox.className = 'jetpack-custom-combobox';
-			// // Create the display button
-			// const displayButton = document.createElement( 'button' );
-			// displayButton.type = 'button';
-			// displayButton.className = 'jetpack-combobox-trigger';
-			// // Create the dropdown arrow
-			// const arrow = document.createElement( 'span' );
-			// arrow.innerHTML = '▼';
-			// arrow.className = 'jetpack-combobox-trigger-arrow';
-			// // Create the selected value display
-			// const selectedDisplay = document.createElement( 'span' );
-			// selectedDisplay.className = 'jetpack-combobox-selected';
-			// displayButton.appendChild( selectedDisplay );
-			// displayButton.appendChild( arrow );
-			// // Create the dropdown container
-			// const dropdown = document.createElement( 'div' );
-			// dropdown.className = 'jetpack-combobox-dropdown';
-			// // Create the search input
-			// const searchInput = document.createElement( 'input' );
-			// searchInput.type = 'text';
-			// searchInput.placeholder = 'Search countries...';
-			// searchInput.className = 'jetpack-combobox-search';
-			// // Create the options list
-			// const optionsList = document.createElement( 'div' );
-			// optionsList.className = 'jetpack-combobox-options';
-			// dropdown.appendChild( searchInput );
-			// dropdown.appendChild( optionsList );
-			// // Assemble the combobox
-			// comboBox.appendChild( displayButton );
-			// comboBox.appendChild( dropdown );
-			// // State for the combobox
-			// let isOpen = false;
-			// let filteredCountries = [ ...countries ];
-			// let selectedCountry =
-			// 	countries.find( country => country.code === context.defaultCountry ) || countries[ 0 ];
-			// // Function to render options
-			// const renderOptions = ( countriesToRender = filteredCountries ) => {
-			// 	optionsList.innerHTML = '';
-			// 	countriesToRender.forEach( country => {
-			// 		const option = document.createElement( 'div' );
-			// 		option.className = `jetpack-combobox-option ${
-			// 			country.code === selectedCountry.code ? 'jetpack-combobox-option-selected' : ''
-			// 		}`;
-			// 		option.innerHTML = `
-			// 			<span class="jetpack-combobox-option-icon">${ country.flag }</span>
-			// 			<span class="jetpack-combobox-option-value">${ country.value }</span>
-			// 			<span class="jetpack-combobox-option-description">${ country.country }</span>
-			// 		`;
-			// 		option.addEventListener( 'mouseenter', () => {
-			// 			option.style.backgroundColor = '#f5f5f5';
-			// 		} );
-			// 		option.addEventListener( 'mouseleave', () => {
-			// 			option.style.backgroundColor =
-			// 				country.code === selectedCountry.code ? '#f0f0f0' : 'transparent';
-			// 		} );
-			// 		option.addEventListener(
-			// 			'click',
-			// 			withScope( () => {
-			// 				selectedCountry = country;
-			// 				updateSelection( selectedDisplay, selectedCountry );
-			// 				closeDropdown();
-			// 			} )
-			// 		);
-			// 		optionsList.appendChild( option );
-			// 	} );
-			// };
-			// // Function to open dropdown
-			// const openDropdown = withScope( () => {
-			// 	isOpen = true;
-			// 	dropdown.style.display = 'block';
-			// 	arrow.style.transform = 'rotate(180deg)';
-			// 	searchInput.focus();
-			// 	renderOptions();
-			// } );
-			// // Function to close dropdown
-			// const closeDropdown = () => {
-			// 	isOpen = false;
-			// 	dropdown.style.display = 'none';
-			// 	arrow.style.transform = 'rotate(0deg)';
-			// 	searchInput.value = '';
-			// 	filteredCountries = [ ...countries ];
-			// };
-			// // Function to filter countries based on search
-			// const filterCountries = searchTerm => {
-			// 	const term = searchTerm.toLowerCase();
-			// 	filteredCountries = countries.filter(
-			// 		country =>
-			// 			country.country.toLowerCase().includes( term ) ||
-			// 			country.code.toLowerCase().includes( term ) ||
-			// 			country.value.includes( term )
-			// 	);
-			// 	renderOptions( filteredCountries );
-			// };
-			// // Event listeners
-			// displayButton.addEventListener( 'click', e => {
-			// 	e.preventDefault();
-			// 	e.stopPropagation();
-			// 	if ( isOpen ) {
-			// 		closeDropdown();
-			// 	} else {
-			// 		openDropdown();
-			// 	}
-			// } );
-			// searchInput.addEventListener(
-			// 	'input',
-			// 	withScope( e => {
-			// 		filterCountries( e.target.value );
-			// 	} )
-			// );
-			// searchInput.addEventListener(
-			// 	'keydown',
-			// 	withSyncEvent(
-			// 		withScope( e => {
-			// 			if ( e.key === 'Escape' ) {
-			// 				closeDropdown();
-			// 			} else if ( e.key === 'Enter' ) {
-			// 				e.preventDefault();
-			// 				// Select the first filtered option if available
-			// 				if ( filteredCountries.length > 0 ) {
-			// 					selectedCountry = filteredCountries[ 0 ];
-			// 					updateSelection( selectedDisplay, selectedCountry );
-			// 					closeDropdown();
-			// 					// Focus on the next input (phone number input)
-			// 					const phoneInput = parentElement.parentElement.querySelector( 'input[type="tel"]' );
-			// 					if ( phoneInput ) {
-			// 						phoneInput.focus();
-			// 					}
-			// 				}
-			// 			}
-			// 		} )
-			// 	)
-			// );
-			// // Close dropdown when clicking outside
-			// document.addEventListener( 'click', e => {
-			// 	if ( ! comboBox.contains( e.target ) ) {
-			// 		closeDropdown();
-			// 	}
-			// } );
-			// // Initialize the display
-			// updateSelection( selectedDisplay, selectedCountry );
-			// // Hide the native select and replace with custom combobox
-			// nativeSelect.style.display = 'none';
-			// parentElement.appendChild( comboBox );
-			// // Store reference for potential cleanup
-			// nativeSelect.jetpackCustomComboBox = comboBox;
-			// asYouTypes[ context.fieldId ] = new AsYouType( context.defaultCountry );
 		},
 	},
 } );

From e4ad83d57edc510f6ea7598c883fea28f2445a50 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 14:43:42 -0300
Subject: [PATCH 12/51] switch to probe styles specific to background colors

---
 projects/packages/forms/src/contact-form/css/combobox.scss | 6 ++++--
 projects/packages/forms/src/contact-form/css/grunion.scss  | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index aac4908a1d77f..c5796d43c73a6 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -36,7 +36,8 @@
 		top: 100%;
 		left: 0;
 		right: 0;
-		background: #fff;
+
+		background-color: var(--jetpack--contact-form--input-background-fallback, #fff);
 		border: 1px solid #ddd;
 		border-top: none;
 		border-radius: 0 0 4px 4px;
@@ -59,7 +60,8 @@
 			font-size: 14px;
 			position: sticky;
 			top: 0;
-			background: #fff;
+			color: inherit;
+			background-color: inherit;
 			z-index: 1;
 
 			&:focus {
diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss
index 88a2bdd0024f5..6a77d44b894df 100644
--- a/projects/packages/forms/src/contact-form/css/grunion.scss
+++ b/projects/packages/forms/src/contact-form/css/grunion.scss
@@ -69,7 +69,7 @@ that needs to mimic the input element styles */
 	font: inherit;
 	border: 1px solid #8c8f94;
 	border-radius: 0;
-	background-color: var(--jetpack--contact-form--background-color);
+	background-color: var(--jetpack--contact-form--input-background);
 }
 
 :where(.contact-form textarea) {

From 773ab13a3247c8b3eac360ec2d75544ff84c6afa Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 14:44:04 -0300
Subject: [PATCH 13/51] fix some failing styles

---
 .../packages/forms/src/contact-form/css/combobox.scss    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index c5796d43c73a6..70364ea7e9171 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -15,10 +15,17 @@
 		font: inherit;
 		line-height: inherit;
 		padding-block: 0;
+		padding-inline: 0;
 		gap: 0.5em;
+		color: inherit;
 
 		&:focus {
 			outline: 0;
+			text-decoration: none;
+		}
+
+		&:hover {
+			text-decoration: none;
 		}
 
 		.jetpack-combobox-trigger-arrow {
@@ -26,7 +33,7 @@
 			transition: transform 0.2s;
 
 			&.is-open {
-				transform: rotate(180deg);
+				transform: scaleY(-1);
 			}
 		}
 	}

From 3602d11fe72d3757cc31119e8c03a58c2ff18dcf Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 14:44:33 -0300
Subject: [PATCH 14/51] use new initialization and dom listener

---
 .../src/contact-form/class-contact-form-field.php      |  5 ++++-
 .../packages/forms/src/modules/field-phone/view.js     | 10 +++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index f86e2de675149..908ac28e8ceb1 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1039,7 +1039,10 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 			);
 			?>
 			>
-				<div class="jetpack-field__input-prefix" data-wp-bind--hidden="!context.showCountrySelector" data-wp-init="callbacks.initializeCustomComboBox">
+				<div class="jetpack-field__input-prefix"
+					data-wp-bind--hidden="!context.showCountrySelector"
+					data-wp-init="callbacks.initializePhoneFieldCustomComboBox"
+					data-wp-on-document--click="actions.phoneComboboxDocumentClickHandler">
 					<div class="jetpack-custom-combobox">
 						<button 
 							class="jetpack-combobox-trigger"
diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index a3b27750d0354..924e766c6f9df 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -180,6 +180,14 @@ const { actions } = store( NAMESPACE, {
 				}, 0 );
 			}
 		},
+		phoneComboboxDocumentClickHandler( event ) {
+			const { ref } = getElement();
+			if ( ref.contains( event.target ) ) {
+				return;
+			}
+			const context = getContext();
+			context.comboboxOpen = false;
+		},
 	},
 	callbacks: {
 		initializePhoneField() {
@@ -194,7 +202,7 @@ const { actions } = store( NAMESPACE, {
 				'.jetpack-combobox-options'
 			);
 		},
-		initializeCustomComboBox() {
+		initializePhoneFieldCustomComboBox() {
 			const context = getContext();
 			if ( ! context.showCountrySelector ) {
 				return;

From ab734df68e2b21464f9a8352a5e9432f42a50762 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 15:42:26 -0300
Subject: [PATCH 15/51] remove old actions, use more consistent naming

---
 .../forms/src/modules/field-phone/view.js     | 34 -------------------
 1 file changed, 34 deletions(-)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 924e766c6f9df..48cb157f3d356 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -68,40 +68,6 @@ const { actions } = store( NAMESPACE, {
 			context.phoneCountryCode = context.defaultCountry;
 			context.phoneNumber = '';
 		},
-		onPhoneNumberChange( event ) {
-			const context = getContext();
-			const fieldId = context.fieldId;
-			const value = event.target.value;
-			if ( ! context.showCountrySelector ) {
-				context.phoneNumber = context.fullPhoneNumber = value;
-				return;
-			}
-			const groomedValue = value.indexOf( '00' ) === 0 ? '+' + value.slice( 2 ) : value;
-
-			asYouTypes[ fieldId ].reset();
-			asYouTypes[ fieldId ].input( groomedValue );
-			if ( asYouTypes[ fieldId ].getCountry() ) {
-				context.phoneCountryCode = asYouTypes[ fieldId ].getCountry();
-				context.phoneNumber = asYouTypes[ fieldId ].getNationalNumber();
-				asYouTypes[ fieldId ] = new AsYouType( context.phoneCountryCode );
-				context.countryPrefix = countries.find(
-					item => item.code === context.phoneCountryCode
-				)?.value;
-			} else {
-				context.phoneNumber = value;
-			}
-			context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
-			actions.updateField( fieldId, value );
-		},
-		onPhoneCountryChange( event ) {
-			const context = getContext();
-			context.phoneCountryCode = event?.target?.value || context.defaultCountry;
-			context.countryPrefix = countries.find(
-				item => item.code === context.phoneCountryCode
-			)?.value;
-			asYouTypes[ context.fieldId ] = new AsYouType( context.phoneCountryCode );
-			context.fullPhoneNumber = context.countryPrefix + ' ' + context.phoneNumber;
-		},
 		phoneNumberInputHandler( event ) {
 			const context = getContext();
 			const fieldId = context.fieldId;

From ce712b31e140f73798ddee5a657633b02a97322a Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 15:42:45 -0300
Subject: [PATCH 16/51] add arrow navigation for dropdown

---
 .../forms/src/modules/field-phone/view.js     | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 48cb157f3d356..a50d72f2edcd7 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -120,14 +120,41 @@ const { actions } = store( NAMESPACE, {
 				context.comboboxOpen = false;
 			} else if ( event.key === 'Enter' ) {
 				event.preventDefault();
-				// Select the first filtered option if available
+				// Select either the currently selected country or the first filtered option if available
 				if ( event.target.value && context.filteredCountries.length > 0 ) {
-					context.selectedCountry = context.filteredCountries[ 0 ];
+					const selectedCountry =
+						context.filteredCountries.find( country => country.selected ) ||
+						context.filteredCountries[ 0 ];
+					context.selectedCountry = selectedCountry;
 					updateSelection( context.selectedCountry );
 					context.comboboxOpen = false;
 					// Focus on the ref input
 					phoneInputRefs[ context.fieldId ]?.focus?.();
 				}
+			} else if ( event.key === 'ArrowDown' ) {
+				event.preventDefault();
+				if ( event.target.value && context.filteredCountries.length > 0 ) {
+					// Find index of currently selected country in filtered list
+					const selectedIndex = context.filteredCountries.findIndex( country => country.selected );
+
+					// If there's a next country in filtered list, select it, otherwise wrap to first
+					const nextIndex =
+						selectedIndex === context.filteredCountries.length - 1 ? 0 : selectedIndex + 1;
+					context.selectedCountry = context.filteredCountries[ nextIndex ];
+					updateSelection( context.selectedCountry );
+				}
+			} else if ( event.key === 'ArrowUp' ) {
+				event.preventDefault();
+				if ( event.target.value && context.filteredCountries.length > 0 ) {
+					// Find index of currently selected country in filtered list
+					const selectedIndex = context.filteredCountries.findIndex( country => country.selected );
+
+					// If there's a previous country in filtered list, select it, otherwise wrap to last
+					const prevIndex =
+						selectedIndex <= 0 ? context.filteredCountries.length - 1 : selectedIndex - 1;
+					context.selectedCountry = context.filteredCountries[ prevIndex ];
+					updateSelection( context.selectedCountry );
+				}
 			}
 		} ),
 		phoneNumberFocusHandler() {

From fcd861b9120d3cccbc78d61bbf7b27844bdc655f Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 15:48:10 -0300
Subject: [PATCH 17/51] update test after new markup

---
 .../forms/tests/php/contact-form/Contact_Form_Test.php      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php b/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php
index 87e44ae072265..655cf58092908 100644
--- a/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php
+++ b/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php
@@ -1703,9 +1703,9 @@ public function assertValidPhoneField( $html, $attributes ) {
 		// Get label.
 		$label = $this->getFirstElement( $wrapper_div, 'label' );
 
-		// Inputs.
-		$visible_input = $this->getFirstElement( $wrapper_div, 'input', 0 );
-		$input         = $this->getFirstElement( $wrapper_div, 'input', 1 );
+		// Inputs. (0 is the comboxbox search input, 1 is the visible input and 2 is the hidden, actual, input)
+		$visible_input = $this->getFirstElement( $wrapper_div, 'input', 1 );
+		$input         = $this->getFirstElement( $wrapper_div, 'input', 2 );
 
 		// Label matches for matches input ID.
 		$this->assertEquals(

From fc4f8f8a1c72e089075aa84ebcee49053a216074 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 16:39:22 -0300
Subject: [PATCH 18/51] show country toggle on toolbar

---
 .../forms/src/blocks/field-telephone/edit.js  | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/blocks/field-telephone/edit.js b/projects/packages/forms/src/blocks/field-telephone/edit.js
index 18c60ef25ac5d..46977b446376f 100644
--- a/projects/packages/forms/src/blocks/field-telephone/edit.js
+++ b/projects/packages/forms/src/blocks/field-telephone/edit.js
@@ -3,10 +3,12 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	BlockContextProvider,
+	BlockControls,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { globe } from '@wordpress/icons';
 import clsx from 'clsx';
 import JetpackFieldControls from '../shared/components/jetpack-field-controls';
 import useFieldSelected from '../shared/hooks/use-field-selected';
@@ -16,6 +18,10 @@ import { countries } from './country-list';
 
 const EMPTY_ARRAY = [];
 
+const isBoolean = value => {
+	return value === true || value === false;
+};
+
 export default function PhoneFieldEdit( props ) {
 	const { setAttributes, attributes, clientId, isSelected } = props;
 	const {
@@ -55,6 +61,10 @@ export default function PhoneFieldEdit( props ) {
 	}, [] );
 
 	const onChangeShowCountrySelector = value => {
+		if ( ! isBoolean( value ) ) {
+			// if not a boolean (ie, event object), toggle the value
+			value = ! showCountrySelector;
+		}
 		setAttributes( {
 			showCountrySelector: value,
 		} );
@@ -106,6 +116,17 @@ export default function PhoneFieldEdit( props ) {
 				<div { ...innerBlocksProps } />
 			</BlockContextProvider>
 
+			<BlockControls __experimentalShareWithChildBlocks>
+				<ToolbarGroup>
+					<ToolbarButton
+						title={ __( 'Show country selector', 'jetpack-forms' ) }
+						icon={ globe }
+						onClick={ onChangeShowCountrySelector }
+						className={ showCountrySelector ? 'is-pressed' : undefined }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'jetpack-forms' ) }>
 					<ToggleControl

From bfa5f1278552ce50fb9a04583e3b97dd9b4ed80a Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 17:25:00 -0300
Subject: [PATCH 19/51] forgotten context consumer declaration

---
 .../forms/src/blocks/contact-form/class-contact-form-block.php   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php
index 79f0ba40fc789..0d4f576838084 100644
--- a/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php
+++ b/projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php
@@ -258,6 +258,7 @@ public static function register_child_blocks() {
 					'jetpack/field-prefix-options',
 					'jetpack/field-prefix-default',
 					'jetpack/field-prefix-onChange',
+					'jetpack/field-phone-country-toggle',
 				),
 			)
 		);

From 860b4c08c7b5165dd5fbc560185cbfb8f7454adf Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 1 Sep 2025 17:26:14 -0300
Subject: [PATCH 20/51] poc: use just flag and trunk on block, provide more
 complete default country selection on inspector controls

---
 .../forms/src/blocks/field-telephone/edit.js  | 29 +++++++++++++++++--
 .../forms/src/blocks/input-phone/edit.js      |  2 +-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/projects/packages/forms/src/blocks/field-telephone/edit.js b/projects/packages/forms/src/blocks/field-telephone/edit.js
index 46977b446376f..feac2b3fcfeaf 100644
--- a/projects/packages/forms/src/blocks/field-telephone/edit.js
+++ b/projects/packages/forms/src/blocks/field-telephone/edit.js
@@ -5,7 +5,13 @@ import {
 	BlockContextProvider,
 	BlockControls,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	ToolbarButton,
+	ToolbarGroup,
+	SelectControl,
+} from '@wordpress/components';
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { globe } from '@wordpress/icons';
@@ -54,6 +60,13 @@ export default function PhoneFieldEdit( props ) {
 	useFormWrapper( props );
 
 	const countryPairs = useMemo( () => {
+		return countries.map( country => ( {
+			label: country.label,
+			value: country.code,
+		} ) );
+	}, [] );
+
+	const countryPairsWithNames = useMemo( () => {
 		return countries.map( country => ( {
 			label: country.country + ' ' + country.label,
 			value: country.code,
@@ -99,7 +112,8 @@ export default function PhoneFieldEdit( props ) {
 	// Handler is provided as context from edit as index.js can't pass it as a prop.
 	const onChangeDefaultCountry = useCallback(
 		event => {
-			const value = event.target.value;
+			// if event is an array, we're using the select control
+			const value = Array.isArray( event ) ? event[ 0 ] : event.target.value;
 			setAttributes( { default: value } );
 		},
 		[ setAttributes ]
@@ -135,6 +149,17 @@ export default function PhoneFieldEdit( props ) {
 						onChange={ onChangeShowCountrySelector }
 						__nextHasNoMarginBottom={ true }
 					/>
+					{ showCountrySelector && (
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Default country', 'jetpack-forms' ) }
+							multiple
+							onChange={ onChangeDefaultCountry }
+							options={ countryPairsWithNames }
+							value={ [ defaultCountry ] }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 
diff --git a/projects/packages/forms/src/blocks/input-phone/edit.js b/projects/packages/forms/src/blocks/input-phone/edit.js
index 00f522853afea..8c353c4f7248e 100644
--- a/projects/packages/forms/src/blocks/input-phone/edit.js
+++ b/projects/packages/forms/src/blocks/input-phone/edit.js
@@ -60,7 +60,7 @@ const PhoneInputEdit = ( { attributes, clientId, isSelected, name, setAttributes
 					<div className="jetpack-field__input-prefix">
 						<select
 							className="jetpack-field__input-element"
-							defaultValue={ defaultPrefix }
+							value={ defaultPrefix }
 							onChange={ onChangeDefaultPrefix }
 						>
 							{ prefixOptions.map( ( { label, value } ) => (

From 227b04392fd05e93420b05236a172d054d2f776f Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 13:20:15 -0300
Subject: [PATCH 21/51] fix searchterm being case sensitive

---
 projects/packages/forms/src/modules/field-phone/view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index a50d72f2edcd7..5fdd07505e583 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -103,7 +103,7 @@ const { actions } = store( NAMESPACE, {
 		},
 		phoneComboboxInputHandler( event ) {
 			const context = getContext();
-			const searchTerm = event.target.value;
+			const searchTerm = event.target.value.toLowerCase();
 			context.filteredCountries = context.allCountries.filter(
 				country =>
 					country.country.toLowerCase().includes( searchTerm ) ||

From d79894aa9b14fa6edf5fc23ec7c390eea9104253 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 13:21:33 -0300
Subject: [PATCH 22/51] scroll country list to top when searching

---
 projects/packages/forms/src/modules/field-phone/view.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 5fdd07505e583..72d87e6e73ac0 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -110,9 +110,7 @@ const { actions } = store( NAMESPACE, {
 					country.code.toLowerCase().includes( searchTerm ) ||
 					country.value.includes( searchTerm )
 			);
-			optionsListRefs[ context.fieldId ]
-				.querySelector( '.jetpack-combobox-option-selected' )
-				?.scrollIntoView?.( { block: 'nearest', container: 'nearest', behavior: 'instant' } );
+			optionsListRefs[ context.fieldId ].scrollTo?.( { top: 0, behavior: 'instant' } );
 		},
 		phoneComboboxKeydownHandler: withSyncEvent( event => {
 			const context = getContext();

From bce6ebf9dad593fec27b9c504c1f44eb6762395b Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 13:23:25 -0300
Subject: [PATCH 23/51] allow arrow key navigation and selection even when
 there is no search term

---
 projects/packages/forms/src/modules/field-phone/view.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index 72d87e6e73ac0..fa266dbb56640 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -119,7 +119,7 @@ const { actions } = store( NAMESPACE, {
 			} else if ( event.key === 'Enter' ) {
 				event.preventDefault();
 				// Select either the currently selected country or the first filtered option if available
-				if ( event.target.value && context.filteredCountries.length > 0 ) {
+				if ( context.filteredCountries.length > 0 ) {
 					const selectedCountry =
 						context.filteredCountries.find( country => country.selected ) ||
 						context.filteredCountries[ 0 ];
@@ -131,7 +131,7 @@ const { actions } = store( NAMESPACE, {
 				}
 			} else if ( event.key === 'ArrowDown' ) {
 				event.preventDefault();
-				if ( event.target.value && context.filteredCountries.length > 0 ) {
+				if ( context.filteredCountries.length > 0 ) {
 					// Find index of currently selected country in filtered list
 					const selectedIndex = context.filteredCountries.findIndex( country => country.selected );
 
@@ -143,7 +143,7 @@ const { actions } = store( NAMESPACE, {
 				}
 			} else if ( event.key === 'ArrowUp' ) {
 				event.preventDefault();
-				if ( event.target.value && context.filteredCountries.length > 0 ) {
+				if ( context.filteredCountries.length > 0 ) {
 					// Find index of currently selected country in filtered list
 					const selectedIndex = context.filteredCountries.findIndex( country => country.selected );
 

From 718b4af6631784a609f72f078f9923d0ec4d75de Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 13:24:11 -0300
Subject: [PATCH 24/51] arrow key navigation selects and scrolls to country

---
 .../forms/src/modules/field-phone/view.js     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/projects/packages/forms/src/modules/field-phone/view.js b/projects/packages/forms/src/modules/field-phone/view.js
index fa266dbb56640..07cf9168e86f6 100644
--- a/projects/packages/forms/src/modules/field-phone/view.js
+++ b/projects/packages/forms/src/modules/field-phone/view.js
@@ -140,6 +140,17 @@ const { actions } = store( NAMESPACE, {
 						selectedIndex === context.filteredCountries.length - 1 ? 0 : selectedIndex + 1;
 					context.selectedCountry = context.filteredCountries[ nextIndex ];
 					updateSelection( context.selectedCountry );
+					setTimeout( () => {
+						// Find and scroll the newly selected option into view
+						const selectedOption = optionsListRefs[ context.fieldId ].querySelector(
+							'.jetpack-combobox-option-selected'
+						);
+						selectedOption?.scrollIntoView?.( {
+							block: 'nearest',
+							container: 'nearest',
+							behavior: 'instant',
+						} );
+					}, 0 );
 				}
 			} else if ( event.key === 'ArrowUp' ) {
 				event.preventDefault();
@@ -152,6 +163,17 @@ const { actions } = store( NAMESPACE, {
 						selectedIndex <= 0 ? context.filteredCountries.length - 1 : selectedIndex - 1;
 					context.selectedCountry = context.filteredCountries[ prevIndex ];
 					updateSelection( context.selectedCountry );
+					setTimeout( () => {
+						// Find and scroll the newly selected option into view
+						const selectedOption = optionsListRefs[ context.fieldId ].querySelector(
+							'.jetpack-combobox-option-selected'
+						);
+						selectedOption?.scrollIntoView?.( {
+							block: 'nearest',
+							container: 'nearest',
+							behavior: 'instant',
+						} );
+					}, 0 );
 				}
 			}
 		} ),

From 4940e343702d04cda7506b671c552105b04e4c2f Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 15:03:45 -0300
Subject: [PATCH 25/51] use pseudo element for down arrow, fix a couple of
 inconsistent styles

---
 .../forms/src/blocks/input-phone/editor.scss       |  4 ++--
 .../src/contact-form/class-contact-form-field.php  |  2 +-
 .../forms/src/contact-form/css/combobox.scss       | 14 ++++++++++++++
 .../forms/src/contact-form/css/phone-field.scss    |  2 +-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/projects/packages/forms/src/blocks/input-phone/editor.scss b/projects/packages/forms/src/blocks/input-phone/editor.scss
index 177c9ea48eab7..37985ba0c5d8c 100644
--- a/projects/packages/forms/src/blocks/input-phone/editor.scss
+++ b/projects/packages/forms/src/blocks/input-phone/editor.scss
@@ -4,7 +4,7 @@
 	.jetpack-field__input,
 	.jetpack-field__textarea {
 		box-sizing: border-box;
-		border-color: var(--jetpack--contact-form--border-color);
+		border-color: currentColor;
 		border-radius: var(--jetpack--contact-form--border-radius);
 		border-width: var(--jetpack--contact-form--border-size);
 		font-size: var(--jetpack--contact-form--font-size);
@@ -86,7 +86,7 @@
 				&:where(select) {
 					// compensate spacing for downarrow
 					// TODO: misbehaves with :focus, fixed on next version of Gutenberg
-					padding-right: 24px;
+					padding-right: 20px;
 				}
 
 				&:focus {
diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 908ac28e8ceb1..00b6a08ce8fce 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1054,7 +1054,7 @@ class="jetpack-combobox-selected"
 								data-wp-text="context.selectedCountry.flag"></span>
 							<span 
 								class="jetpack-combobox-trigger-arrow"
-								data-wp-class--is-open="context.comboboxOpen">▼</span>
+								data-wp-class--is-open="context.comboboxOpen">&nbsp;</span>
 							<span 
 								class="jetpack-combobox-selected"
 								data-wp-text="context.selectedCountry.value"></span>
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 70364ea7e9171..a068049684c14 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -31,6 +31,20 @@
 		.jetpack-combobox-trigger-arrow {
 			font-size: 10px;
 			transition: transform 0.2s;
+			position: relative;
+			width: 8px;
+
+			&::after {
+				content: "";
+				position: absolute;
+				left: 1px;
+				top: 0;
+				transform: translateY(75%) rotate(45deg);
+				width: 7px;
+				height: 7px;
+				border-right: 1px solid currentColor;
+				border-bottom: 1px solid currentColor;
+			}
 
 			&.is-open {
 				transform: scaleY(-1);
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index c1deb68c110c7..827805a2ff835 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -9,7 +9,7 @@
 		display: flex;
 		gap: 8px;
 		background-color: var(--jetpack--contact-form--input-background);
-		border-color: var(--jetpack--contact-form--border-color);
+		border-color: currentColor;
 		border-width: var(--jetpack--contact-form--border-size);
 		border-style: var(--jetpack--contact-form--border-style);
 		border-radius: var(--jetpack--contact-form--border-radius);

From b10c1a2fb658b1aef8d3dcfc9b80c97a42ca8593 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 17:52:01 -0300
Subject: [PATCH 26/51] fix indentation

---
 .../forms/src/contact-form/class-contact-form-field.php       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 00b6a08ce8fce..25c24bd807fc2 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1070,8 +1070,8 @@ class="jetpack-combobox-search"
 								data-wp-on--keydown="actions.phoneComboboxKeydownHandler">
 							<div class="jetpack-combobox-options">
 								<template
-								data-wp-each--filtered="context.filteredCountries"
-								data-wp-each-key="context.filtered.code">
+									data-wp-each--filtered="context.filteredCountries"
+									data-wp-each-key="context.filtered.code">
 									<div 
 										class="jetpack-combobox-option"
 										data-wp-key="context.filtered.code"

From 9c1699af61a888d610db8623c66097b93cf0c5bc Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 17:52:22 -0300
Subject: [PATCH 27/51] remove unused styling

---
 projects/packages/forms/src/contact-form/css/phone-field.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 827805a2ff835..ff4cae2ce9f17 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -27,8 +27,6 @@
 		}
 
 		.jetpack-field__input-prefix:not([hidden]) {
-			// display: flex;
-			// width: 40%;
 
 			.jetpack-field__input-element {
 				width: 100%;

From 763fe32183e9fd0e61b372e9fdae00390e246492 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Tue, 2 Sep 2025 17:53:04 -0300
Subject: [PATCH 28/51] make phone input look better with animated and outlined
 styles

---
 .../forms/src/blocks/contact-form/editor.scss         |  2 +-
 .../packages/forms/src/blocks/input-phone/editor.scss | 11 +++++++++++
 .../forms/src/contact-form/css/phone-field.scss       | 10 +++++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
index bea235171cbb8..b3614ca57818d 100644
--- a/projects/packages/forms/src/blocks/contact-form/editor.scss
+++ b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -955,7 +955,7 @@
 			.jetpack-field__input,
 			.jetpack-field__textarea,
 			.jetpack-field-dropdown__toggle {
-				padding-top: 1.4em;
+				padding-top: max(var(--jetpack--contact-form--input-padding-top, 0), 1.4em);
 				padding-left: var(--jetpack--contact-form--animated-left-offset);
 			}
 
diff --git a/projects/packages/forms/src/blocks/input-phone/editor.scss b/projects/packages/forms/src/blocks/input-phone/editor.scss
index 37985ba0c5d8c..86874c70530aa 100644
--- a/projects/packages/forms/src/blocks/input-phone/editor.scss
+++ b/projects/packages/forms/src/blocks/input-phone/editor.scss
@@ -100,6 +100,10 @@
 .is-style-animated .jetpack-contact-form .jetpack-field.jetpack-field-phone,
 .is-style-animated .jetpack-contact-form .jetpack-field.jetpack-field-telephone {
 
+	.jetpack-field__input {
+		padding-top: max(var(--jetpack--contact-form--input-padding-top, 0), 1.4em);
+	}
+
 	&:not(.has-placeholder):not(.is-selected),
 	&:not(.has-placeholder):not(.has-child-selected) {
 
@@ -120,6 +124,13 @@
 .is-style-outlined .jetpack-contact-form .jetpack-field.jetpack-field-phone,
 .is-style-outlined .jetpack-contact-form .jetpack-field.jetpack-field-telephone {
 
+	.jetpack-field__input {
+
+		&.is-selected {
+			box-shadow: unset;
+		}
+	}
+
 	&:not(.has-placeholder):not(.is-selected),
 	&:not(.has-placeholder):not(.has-child-selected) {
 
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index ff4cae2ce9f17..3dcb463ba7dab 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -74,10 +74,14 @@
 	.is-style-animated & {
 
 		.jetpack-field__input-phone-wrapper {
-			padding-top: 1.4em;
+			padding-top: max(var(--jetpack--contact-form--input-padding-top, 0), 1.4em);
 			padding-left: var(--jetpack--contact-form--animated-left-offset);
 			padding-right: var(--jetpack--contact-form--animated-right-offset);
 
+			&:has(.jetpack-field__input-element:focus) {
+				outline: unset;
+			}
+
 			&:not(:has(*:focus, *:active)) {
 
 				.jetpack-field__input-prefix:not(:has(~ .has-placeholder),:has(~ .has-value)) {
@@ -103,6 +107,10 @@
 
 		.jetpack-field__input-phone-wrapper {
 
+			&:has(.jetpack-field__input-element:focus) {
+				outline: unset;
+			}
+
 			&:not(:has(*:focus, *:active)) {
 
 				// notched label is game of superpositions with z-index,

From 7ba16fd2e9521854afc79822261fb5f16d67ec40 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 11:54:50 -0300
Subject: [PATCH 29/51] minor style/class fixes

---
 .../src/contact-form/class-contact-form-field.php      |  3 ++-
 .../packages/forms/src/contact-form/css/combobox.scss  | 10 +++-------
 .../forms/src/contact-form/css/phone-field.scss        |  6 +++---
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 25c24bd807fc2..1c39a9c9a6284 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1016,6 +1016,7 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 			style="<?php echo ( ! empty( $this->field_styles ) && is_string( $this->field_styles ) ? esc_attr( $this->field_styles ) : '' ); ?>"
 			data-wp-on--jetpack-form-reset='actions.phoneResetHandler'
 			data-wp-init="callbacks.initializePhoneField"
+			data-wp-class--is-combobox-open="context.comboboxOpen"
 			<?php
 			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- function is supposed to work this way
 			echo wp_interactivity_data_wp_context(
@@ -1103,7 +1104,7 @@ class="jetpack-combobox-option"
 					data-wp-on--input='actions.phoneNumberInputHandler'
 					data-wp-on--blur='actions.onFieldBlur'
 					data-wp-on--focus='actions.phoneNumberFocusHandler'
-					data-wp-class--has-value='state.hasFieldValue'
+					data-wp-class--has-value='context.phoneNumber'
 					/>
 				<input type="hidden"
 					id="<?php echo esc_attr( $id ); ?>"
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index a068049684c14..59cd24e92d25b 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -39,11 +39,11 @@
 				position: absolute;
 				left: 1px;
 				top: 0;
-				transform: translateY(75%) rotate(45deg);
+				transform: translateY(100%) rotate(45deg);
 				width: 7px;
 				height: 7px;
-				border-right: 1px solid currentColor;
-				border-bottom: 1px solid currentColor;
+				border-right: 1.5px solid currentColor;
+				border-bottom: 1.5px solid currentColor;
 			}
 
 			&.is-open {
@@ -84,10 +84,6 @@
 			color: inherit;
 			background-color: inherit;
 			z-index: 1;
-
-			&:focus {
-				border-bottom-color: #007cba;
-			}
 		}
 
 		.jetpack-combobox-options {
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 3dcb463ba7dab..22e1f96ddf8cc 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -9,7 +9,7 @@
 		display: flex;
 		gap: 8px;
 		background-color: var(--jetpack--contact-form--input-background);
-		border-color: currentColor;
+		border-color: var(--jetpack--contact-form--border-color, currentColor);
 		border-width: var(--jetpack--contact-form--border-size);
 		border-style: var(--jetpack--contact-form--border-style);
 		border-radius: var(--jetpack--contact-form--border-radius);
@@ -82,7 +82,7 @@
 				outline: unset;
 			}
 
-			&:not(:has(*:focus, *:active)) {
+			&:not(:has(*:focus, *:active)):not(.is-combobox-open) {
 
 				.jetpack-field__input-prefix:not(:has(~ .has-placeholder),:has(~ .has-value)) {
 					pointer-events: none;
@@ -111,7 +111,7 @@
 				outline: unset;
 			}
 
-			&:not(:has(*:focus, *:active)) {
+			&:not(:has(*:focus, *:active)):not(.is-combobox-open) {
 
 				// notched label is game of superpositions with z-index,
 				// while no input element is selected, force transparent so label is visible

From 497746fd7df2cb01bd6a1e3e6bae696f0769f52e Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 11:56:45 -0300
Subject: [PATCH 30/51] changelog

---
 .../packages/forms/changelog/add-forms-fancy-country-dropdown | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/packages/forms/changelog/add-forms-fancy-country-dropdown

diff --git a/projects/packages/forms/changelog/add-forms-fancy-country-dropdown b/projects/packages/forms/changelog/add-forms-fancy-country-dropdown
new file mode 100644
index 0000000000000..8e60351e60572
--- /dev/null
+++ b/projects/packages/forms/changelog/add-forms-fancy-country-dropdown
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: add searchable country selector dropdown (combobox)

From 584840debeeaebc8daaf32fe2bea2794a6762d3d Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 14:48:15 -0300
Subject: [PATCH 31/51] split combobox to shared component, add handlers

---
 .../country-names-translated.js               | 257 +++++++++++++++++
 .../forms/src/blocks/field-telephone/edit.js  |   5 +-
 .../forms/src/blocks/input-phone/edit.js      |  60 ++--
 .../shared/components/country-combobox.js     | 268 ++++++++++++++++++
 .../contact-form/class-contact-form-field.php |   1 +
 .../forms/src/contact-form/css/combobox.scss  |  28 +-
 6 files changed, 594 insertions(+), 25 deletions(-)
 create mode 100644 projects/packages/forms/src/blocks/field-telephone/country-names-translated.js
 create mode 100644 projects/packages/forms/src/blocks/shared/components/country-combobox.js

diff --git a/projects/packages/forms/src/blocks/field-telephone/country-names-translated.js b/projects/packages/forms/src/blocks/field-telephone/country-names-translated.js
new file mode 100644
index 0000000000000..df579b76906c6
--- /dev/null
+++ b/projects/packages/forms/src/blocks/field-telephone/country-names-translated.js
@@ -0,0 +1,257 @@
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Translated country names for internationalization.
+ * This provides human-readable, translatable country names
+ * that can be used alongside the country-list.js data.
+ */
+export const translatedCountryNames = {
+	AF: __( 'Afghanistan', 'jetpack-forms' ),
+	AL: __( 'Albania', 'jetpack-forms' ),
+	DZ: __( 'Algeria', 'jetpack-forms' ),
+	AS: __( 'American Samoa', 'jetpack-forms' ),
+	AD: __( 'Andorra', 'jetpack-forms' ),
+	AO: __( 'Angola', 'jetpack-forms' ),
+	AI: __( 'Anguilla', 'jetpack-forms' ),
+	AG: __( 'Antigua and Barbuda', 'jetpack-forms' ),
+	AR: __( 'Argentina', 'jetpack-forms' ),
+	AM: __( 'Armenia', 'jetpack-forms' ),
+	AW: __( 'Aruba', 'jetpack-forms' ),
+	AU: __( 'Australia', 'jetpack-forms' ),
+	AT: __( 'Austria', 'jetpack-forms' ),
+	AZ: __( 'Azerbaijan', 'jetpack-forms' ),
+	BS: __( 'Bahamas', 'jetpack-forms' ),
+	BH: __( 'Bahrain', 'jetpack-forms' ),
+	BD: __( 'Bangladesh', 'jetpack-forms' ),
+	BB: __( 'Barbados', 'jetpack-forms' ),
+	BY: __( 'Belarus', 'jetpack-forms' ),
+	BE: __( 'Belgium', 'jetpack-forms' ),
+	BZ: __( 'Belize', 'jetpack-forms' ),
+	BJ: __( 'Benin', 'jetpack-forms' ),
+	BM: __( 'Bermuda', 'jetpack-forms' ),
+	BT: __( 'Bhutan', 'jetpack-forms' ),
+	BO: __( 'Bolivia', 'jetpack-forms' ),
+	BA: __( 'Bosnia and Herzegovina', 'jetpack-forms' ),
+	BW: __( 'Botswana', 'jetpack-forms' ),
+	BR: __( 'Brazil', 'jetpack-forms' ),
+	IO: __( 'British Indian Ocean Territory', 'jetpack-forms' ),
+	VG: __( 'British Virgin Islands', 'jetpack-forms' ),
+	BN: __( 'Brunei', 'jetpack-forms' ),
+	BG: __( 'Bulgaria', 'jetpack-forms' ),
+	BF: __( 'Burkina Faso', 'jetpack-forms' ),
+	BI: __( 'Burundi', 'jetpack-forms' ),
+	KH: __( 'Cambodia', 'jetpack-forms' ),
+	CM: __( 'Cameroon', 'jetpack-forms' ),
+	CA: __( 'Canada', 'jetpack-forms' ),
+	CV: __( 'Cape Verde', 'jetpack-forms' ),
+	KY: __( 'Cayman Islands', 'jetpack-forms' ),
+	CF: __( 'Central African Republic', 'jetpack-forms' ),
+	TD: __( 'Chad', 'jetpack-forms' ),
+	CL: __( 'Chile', 'jetpack-forms' ),
+	CN: __( 'China', 'jetpack-forms' ),
+	CX: __( 'Christmas Island', 'jetpack-forms' ),
+	CC: __( 'Cocos (Keeling) Islands', 'jetpack-forms' ),
+	CO: __( 'Colombia', 'jetpack-forms' ),
+	KM: __( 'Comoros', 'jetpack-forms' ),
+	CG: __( 'Congo - Brazzaville', 'jetpack-forms' ),
+	CD: __( 'Congo - Kinshasa', 'jetpack-forms' ),
+	CK: __( 'Cook Islands', 'jetpack-forms' ),
+	CR: __( 'Costa Rica', 'jetpack-forms' ),
+	HR: __( 'Croatia', 'jetpack-forms' ),
+	CU: __( 'Cuba', 'jetpack-forms' ),
+	CY: __( 'Cyprus', 'jetpack-forms' ),
+	CZ: __( 'Czech Republic', 'jetpack-forms' ),
+	CI: __( "Côte d'Ivoire", 'jetpack-forms' ),
+	DK: __( 'Denmark', 'jetpack-forms' ),
+	DJ: __( 'Djibouti', 'jetpack-forms' ),
+	DM: __( 'Dominica', 'jetpack-forms' ),
+	DO: __( 'Dominican Republic', 'jetpack-forms' ),
+	EC: __( 'Ecuador', 'jetpack-forms' ),
+	EG: __( 'Egypt', 'jetpack-forms' ),
+	SV: __( 'El Salvador', 'jetpack-forms' ),
+	GQ: __( 'Equatorial Guinea', 'jetpack-forms' ),
+	ER: __( 'Eritrea', 'jetpack-forms' ),
+	EE: __( 'Estonia', 'jetpack-forms' ),
+	SZ: __( 'Eswatini', 'jetpack-forms' ),
+	ET: __( 'Ethiopia', 'jetpack-forms' ),
+	FK: __( 'Falkland Islands', 'jetpack-forms' ),
+	FO: __( 'Faroe Islands', 'jetpack-forms' ),
+	FJ: __( 'Fiji', 'jetpack-forms' ),
+	FI: __( 'Finland', 'jetpack-forms' ),
+	FR: __( 'France', 'jetpack-forms' ),
+	GF: __( 'French Guiana', 'jetpack-forms' ),
+	PF: __( 'French Polynesia', 'jetpack-forms' ),
+	GA: __( 'Gabon', 'jetpack-forms' ),
+	GM: __( 'Gambia', 'jetpack-forms' ),
+	GE: __( 'Georgia', 'jetpack-forms' ),
+	DE: __( 'Germany', 'jetpack-forms' ),
+	GH: __( 'Ghana', 'jetpack-forms' ),
+	GI: __( 'Gibraltar', 'jetpack-forms' ),
+	GR: __( 'Greece', 'jetpack-forms' ),
+	GL: __( 'Greenland', 'jetpack-forms' ),
+	GD: __( 'Grenada', 'jetpack-forms' ),
+	GP: __( 'Guadeloupe', 'jetpack-forms' ),
+	GU: __( 'Guam', 'jetpack-forms' ),
+	GT: __( 'Guatemala', 'jetpack-forms' ),
+	GG: __( 'Guernsey', 'jetpack-forms' ),
+	GN: __( 'Guinea', 'jetpack-forms' ),
+	GW: __( 'Guinea-Bissau', 'jetpack-forms' ),
+	GY: __( 'Guyana', 'jetpack-forms' ),
+	HT: __( 'Haiti', 'jetpack-forms' ),
+	HN: __( 'Honduras', 'jetpack-forms' ),
+	HK: __( 'Hong Kong', 'jetpack-forms' ),
+	HU: __( 'Hungary', 'jetpack-forms' ),
+	IS: __( 'Iceland', 'jetpack-forms' ),
+	IN: __( 'India', 'jetpack-forms' ),
+	ID: __( 'Indonesia', 'jetpack-forms' ),
+	IR: __( 'Iran', 'jetpack-forms' ),
+	IQ: __( 'Iraq', 'jetpack-forms' ),
+	IE: __( 'Ireland', 'jetpack-forms' ),
+	IM: __( 'Isle of Man', 'jetpack-forms' ),
+	IL: __( 'Israel', 'jetpack-forms' ),
+	IT: __( 'Italy', 'jetpack-forms' ),
+	JM: __( 'Jamaica', 'jetpack-forms' ),
+	JP: __( 'Japan', 'jetpack-forms' ),
+	JE: __( 'Jersey', 'jetpack-forms' ),
+	JO: __( 'Jordan', 'jetpack-forms' ),
+	KZ: __( 'Kazakhstan', 'jetpack-forms' ),
+	KE: __( 'Kenya', 'jetpack-forms' ),
+	KI: __( 'Kiribati', 'jetpack-forms' ),
+	XK: __( 'Kosovo', 'jetpack-forms' ),
+	KW: __( 'Kuwait', 'jetpack-forms' ),
+	KG: __( 'Kyrgyzstan', 'jetpack-forms' ),
+	LA: __( 'Laos', 'jetpack-forms' ),
+	LV: __( 'Latvia', 'jetpack-forms' ),
+	LB: __( 'Lebanon', 'jetpack-forms' ),
+	LS: __( 'Lesotho', 'jetpack-forms' ),
+	LR: __( 'Liberia', 'jetpack-forms' ),
+	LY: __( 'Libya', 'jetpack-forms' ),
+	LI: __( 'Liechtenstein', 'jetpack-forms' ),
+	LT: __( 'Lithuania', 'jetpack-forms' ),
+	LU: __( 'Luxembourg', 'jetpack-forms' ),
+	MO: __( 'Macao', 'jetpack-forms' ),
+	MG: __( 'Madagascar', 'jetpack-forms' ),
+	MW: __( 'Malawi', 'jetpack-forms' ),
+	MY: __( 'Malaysia', 'jetpack-forms' ),
+	MV: __( 'Maldives', 'jetpack-forms' ),
+	ML: __( 'Mali', 'jetpack-forms' ),
+	MT: __( 'Malta', 'jetpack-forms' ),
+	MH: __( 'Marshall Islands', 'jetpack-forms' ),
+	MQ: __( 'Martinique', 'jetpack-forms' ),
+	MR: __( 'Mauritania', 'jetpack-forms' ),
+	MU: __( 'Mauritius', 'jetpack-forms' ),
+	YT: __( 'Mayotte', 'jetpack-forms' ),
+	MX: __( 'Mexico', 'jetpack-forms' ),
+	FM: __( 'Micronesia', 'jetpack-forms' ),
+	MD: __( 'Moldova', 'jetpack-forms' ),
+	MC: __( 'Monaco', 'jetpack-forms' ),
+	MN: __( 'Mongolia', 'jetpack-forms' ),
+	ME: __( 'Montenegro', 'jetpack-forms' ),
+	MS: __( 'Montserrat', 'jetpack-forms' ),
+	MA: __( 'Morocco', 'jetpack-forms' ),
+	MZ: __( 'Mozambique', 'jetpack-forms' ),
+	MM: __( 'Myanmar', 'jetpack-forms' ),
+	NA: __( 'Namibia', 'jetpack-forms' ),
+	NR: __( 'Nauru', 'jetpack-forms' ),
+	NP: __( 'Nepal', 'jetpack-forms' ),
+	NL: __( 'Netherlands', 'jetpack-forms' ),
+	NC: __( 'New Caledonia', 'jetpack-forms' ),
+	NZ: __( 'New Zealand', 'jetpack-forms' ),
+	NI: __( 'Nicaragua', 'jetpack-forms' ),
+	NE: __( 'Niger', 'jetpack-forms' ),
+	NG: __( 'Nigeria', 'jetpack-forms' ),
+	NU: __( 'Niue', 'jetpack-forms' ),
+	NF: __( 'Norfolk Island', 'jetpack-forms' ),
+	KP: __( 'North Korea', 'jetpack-forms' ),
+	MK: __( 'North Macedonia', 'jetpack-forms' ),
+	MP: __( 'Northern Mariana Islands', 'jetpack-forms' ),
+	NO: __( 'Norway', 'jetpack-forms' ),
+	OM: __( 'Oman', 'jetpack-forms' ),
+	PK: __( 'Pakistan', 'jetpack-forms' ),
+	PW: __( 'Palau', 'jetpack-forms' ),
+	PS: __( 'Palestine', 'jetpack-forms' ),
+	PA: __( 'Panama', 'jetpack-forms' ),
+	PG: __( 'Papua New Guinea', 'jetpack-forms' ),
+	PY: __( 'Paraguay', 'jetpack-forms' ),
+	PE: __( 'Peru', 'jetpack-forms' ),
+	PH: __( 'Philippines', 'jetpack-forms' ),
+	PN: __( 'Pitcairn Islands', 'jetpack-forms' ),
+	PL: __( 'Poland', 'jetpack-forms' ),
+	PT: __( 'Portugal', 'jetpack-forms' ),
+	PR: __( 'Puerto Rico', 'jetpack-forms' ),
+	QA: __( 'Qatar', 'jetpack-forms' ),
+	RO: __( 'Romania', 'jetpack-forms' ),
+	RU: __( 'Russia', 'jetpack-forms' ),
+	RW: __( 'Rwanda', 'jetpack-forms' ),
+	RE: __( 'Réunion', 'jetpack-forms' ),
+	BL: __( 'Saint Barthélemy', 'jetpack-forms' ),
+	SH: __( 'Saint Helena', 'jetpack-forms' ),
+	KN: __( 'Saint Kitts and Nevis', 'jetpack-forms' ),
+	LC: __( 'Saint Lucia', 'jetpack-forms' ),
+	MF: __( 'Saint Martin', 'jetpack-forms' ),
+	PM: __( 'Saint Pierre and Miquelon', 'jetpack-forms' ),
+	VC: __( 'Saint Vincent and the Grenadines', 'jetpack-forms' ),
+	WS: __( 'Samoa', 'jetpack-forms' ),
+	SM: __( 'San Marino', 'jetpack-forms' ),
+	SA: __( 'Saudi Arabia', 'jetpack-forms' ),
+	SN: __( 'Senegal', 'jetpack-forms' ),
+	RS: __( 'Serbia', 'jetpack-forms' ),
+	SC: __( 'Seychelles', 'jetpack-forms' ),
+	SL: __( 'Sierra Leone', 'jetpack-forms' ),
+	SG: __( 'Singapore', 'jetpack-forms' ),
+	SK: __( 'Slovakia', 'jetpack-forms' ),
+	SI: __( 'Slovenia', 'jetpack-forms' ),
+	SB: __( 'Solomon Islands', 'jetpack-forms' ),
+	SO: __( 'Somalia', 'jetpack-forms' ),
+	ZA: __( 'South Africa', 'jetpack-forms' ),
+	GS: __( 'South Georgia and the South Sandwich Islands', 'jetpack-forms' ),
+	KR: __( 'South Korea', 'jetpack-forms' ),
+	ES: __( 'Spain', 'jetpack-forms' ),
+	LK: __( 'Sri Lanka', 'jetpack-forms' ),
+	SD: __( 'Sudan', 'jetpack-forms' ),
+	SR: __( 'Suriname', 'jetpack-forms' ),
+	SJ: __( 'Svalbard and Jan Mayen', 'jetpack-forms' ),
+	SE: __( 'Sweden', 'jetpack-forms' ),
+	CH: __( 'Switzerland', 'jetpack-forms' ),
+	SY: __( 'Syria', 'jetpack-forms' ),
+	ST: __( 'São Tomé and Príncipe', 'jetpack-forms' ),
+	TW: __( 'Taiwan', 'jetpack-forms' ),
+	TJ: __( 'Tajikistan', 'jetpack-forms' ),
+	TZ: __( 'Tanzania', 'jetpack-forms' ),
+	TH: __( 'Thailand', 'jetpack-forms' ),
+	TL: __( 'Timor-Leste', 'jetpack-forms' ),
+	TG: __( 'Togo', 'jetpack-forms' ),
+	TK: __( 'Tokelau', 'jetpack-forms' ),
+	TO: __( 'Tonga', 'jetpack-forms' ),
+	TT: __( 'Trinidad and Tobago', 'jetpack-forms' ),
+	TN: __( 'Tunisia', 'jetpack-forms' ),
+	TR: __( 'Turkey', 'jetpack-forms' ),
+	TM: __( 'Turkmenistan', 'jetpack-forms' ),
+	TC: __( 'Turks and Caicos Islands', 'jetpack-forms' ),
+	TV: __( 'Tuvalu', 'jetpack-forms' ),
+	VI: __( 'U.S. Virgin Islands', 'jetpack-forms' ),
+	UG: __( 'Uganda', 'jetpack-forms' ),
+	UA: __( 'Ukraine', 'jetpack-forms' ),
+	AE: __( 'United Arab Emirates', 'jetpack-forms' ),
+	GB: __( 'United Kingdom', 'jetpack-forms' ),
+	US: __( 'United States', 'jetpack-forms' ),
+	UY: __( 'Uruguay', 'jetpack-forms' ),
+	UZ: __( 'Uzbekistan', 'jetpack-forms' ),
+	VU: __( 'Vanuatu', 'jetpack-forms' ),
+	VA: __( 'Vatican City', 'jetpack-forms' ),
+	VE: __( 'Venezuela', 'jetpack-forms' ),
+	VN: __( 'Vietnam', 'jetpack-forms' ),
+	WF: __( 'Wallis and Futuna', 'jetpack-forms' ),
+	YE: __( 'Yemen', 'jetpack-forms' ),
+	ZM: __( 'Zambia', 'jetpack-forms' ),
+	ZW: __( 'Zimbabwe', 'jetpack-forms' ),
+};
+
+/**
+ * Helper function to get translated country name by country code
+ * @param {string} countryCode - Two-letter country code (e.g., 'US', 'CA')
+ * @return {string} Translated country name or the original code if not found
+ */
+export const getTranslatedCountryName = countryCode => {
+	return translatedCountryNames[ countryCode ] || countryCode;
+};
diff --git a/projects/packages/forms/src/blocks/field-telephone/edit.js b/projects/packages/forms/src/blocks/field-telephone/edit.js
index feac2b3fcfeaf..ffa1e0457c336 100644
--- a/projects/packages/forms/src/blocks/field-telephone/edit.js
+++ b/projects/packages/forms/src/blocks/field-telephone/edit.js
@@ -21,6 +21,7 @@ import useFieldSelected from '../shared/hooks/use-field-selected';
 import useFormWrapper from '../shared/hooks/use-form-wrapper';
 import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles';
 import { countries } from './country-list';
+import { getTranslatedCountryName } from './country-names-translated';
 
 const EMPTY_ARRAY = [];
 
@@ -61,8 +62,8 @@ export default function PhoneFieldEdit( props ) {
 
 	const countryPairs = useMemo( () => {
 		return countries.map( country => ( {
-			label: country.label,
-			value: country.code,
+			...country,
+			country: getTranslatedCountryName( country.code ),
 		} ) );
 	}, [] );
 
diff --git a/projects/packages/forms/src/blocks/input-phone/edit.js b/projects/packages/forms/src/blocks/input-phone/edit.js
index 8c353c4f7248e..36f4a8817af88 100644
--- a/projects/packages/forms/src/blocks/input-phone/edit.js
+++ b/projects/packages/forms/src/blocks/input-phone/edit.js
@@ -1,9 +1,11 @@
 import { useBlockProps } from '@wordpress/block-editor';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useRef, useState, useEffect, useMemo } from '@wordpress/element';
+import CountryCombobox from '../shared/components/country-combobox';
 import useInsertAfterOnEnterKeyDown from '../shared/hooks/use-insert-after-on-enter-key-down';
 import { useSyncedAttributes } from '../shared/hooks/use-synced-attributes';
 import useVariationStyleProperties from '../shared/hooks/use-variation-style-properties.js';
 import './editor.scss';
+import '../../contact-form/css/combobox.scss';
 
 const SYNCED_ATTRIBUTE_KEYS = [
 	'backgroundColor',
@@ -16,6 +18,8 @@ const SYNCED_ATTRIBUTE_KEYS = [
 
 const PhoneInputEdit = ( { attributes, clientId, isSelected, name, setAttributes, context } ) => {
 	const { 'jetpack/field-share-attributes': isSynced } = context;
+	const [ comboboxOpen, setComboboxOpen ] = useState( false );
+	const inputRef = useRef( null );
 
 	useSyncedAttributes(
 		'jetpack/input',
@@ -45,36 +49,56 @@ const PhoneInputEdit = ( { attributes, clientId, isSelected, name, setAttributes
 	);
 
 	// Prefix/Country selector
-	const prefixOptions = context?.[ 'jetpack/field-prefix-options' ] || [];
 	const defaultPrefix = context?.[ 'jetpack/field-prefix-default' ] || 'US';
-	const onChangeDefaultPrefix = context?.[ 'jetpack/field-prefix-onChange' ] || ( () => {} );
 	const showCountrySelector = context?.[ 'jetpack/field-phone-country-toggle' ] || false;
 
+	const handleChangeDefaultPrefix = useCallback(
+		event => {
+			const onChangeDefaultPrefix = context?.[ 'jetpack/field-prefix-onChange' ] || ( () => {} );
+			onChangeDefaultPrefix( event );
+			setComboboxOpen( false );
+			// Focus on the input element after closing the combobox
+			setTimeout( () => {
+				if ( inputRef.current ) {
+					inputRef.current.focus();
+				}
+			}, 0 );
+		},
+		[ context, setComboboxOpen ]
+	);
+
+	// ensure the combobox is closed when the block is not selected
+	useEffect( () => {
+		if ( isSelected ) {
+			return;
+		}
+		setComboboxOpen( isSelected );
+	}, [ isSelected ] );
+
+	const countries = useMemo( () => {
+		return context?.[ 'jetpack/field-prefix-options' ] || [];
+	}, [ context ] );
+
 	return (
 		<>
 			<div { ...blockProps }>
-				{ showCountrySelector && prefixOptions.length === 1 && (
-					<div className="jetpack-field__input-prefix">{ prefixOptions[ 0 ].label }</div>
-				) }
-				{ showCountrySelector && prefixOptions.length > 1 && (
+				{ showCountrySelector && countries.length > 1 && defaultPrefix && (
 					<div className="jetpack-field__input-prefix">
-						<select
-							className="jetpack-field__input-element"
-							value={ defaultPrefix }
-							onChange={ onChangeDefaultPrefix }
-						>
-							{ prefixOptions.map( ( { label, value } ) => (
-								<option key={ value + label } value={ value }>
-									{ label }
-								</option>
-							) ) }
-						</select>
+						<CountryCombobox
+							countries={ countries }
+							selectedCountryCode={ defaultPrefix }
+							onCountryChange={ handleChangeDefaultPrefix }
+							isOpen={ comboboxOpen }
+							onOpenChange={ setComboboxOpen }
+						/>
 					</div>
 				) }
 				<input
+					ref={ inputRef }
 					className="jetpack-field__input-element"
 					onChange={ onChange }
 					onKeyDown={ onKeyDown }
+					onClick={ () => setComboboxOpen( false ) }
 					type="text"
 					value={ isSelected ? placeholder : '' }
 					placeholder={ placeholder }
diff --git a/projects/packages/forms/src/blocks/shared/components/country-combobox.js b/projects/packages/forms/src/blocks/shared/components/country-combobox.js
new file mode 100644
index 0000000000000..d6e24ece5c35f
--- /dev/null
+++ b/projects/packages/forms/src/blocks/shared/components/country-combobox.js
@@ -0,0 +1,268 @@
+import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+
+/**
+ * CountryCombobox Component
+ *
+ * A reusable combobox component for selecting countries with search functionality.
+ * Handles its own state management for open/closed state, filtering, and selection.
+ *
+ * @param {object}   props                     - The component props
+ * @param {Array}    props.countries           - Array of country objects with code, country, flag, and value properties
+ * @param {string}   props.selectedCountryCode - The currently selected country code
+ * @param {Function} props.onCountryChange     - Callback function called when a country is selected
+ * @param {boolean}  props.isOpen              - External control for combobox open state
+ * @param {Function} props.onOpenChange        - Callback function for open state changes
+ * @param {string}   props.className           - Additional CSS class names
+ * @param {boolean}  props.disabled            - Whether the combobox is disabled
+ * @return {Element|null} The CountryCombobox component or null if no countries/selectedCountry
+ */
+const CountryCombobox = ( {
+	countries = [],
+	selectedCountryCode = null,
+	onCountryChange,
+	isOpen: externalIsOpen = false,
+	onOpenChange,
+	className = '',
+	disabled = false,
+} ) => {
+	const [ internalIsOpen, setInternalIsOpen ] = useState( false );
+	const [ filteredCountries, setFilteredCountries ] = useState( [] );
+	const [ searchTerm, setSearchTerm ] = useState( '' );
+	const [ selectedCountry, setSelectedCountry ] = useState( null );
+	const [ focusedOptionIndex, setFocusedOptionIndex ] = useState( -1 );
+	const searchInputRef = useRef( null );
+	const optionsRef = useRef( [] );
+
+	// Use external open state if provided, otherwise use internal state
+	const isOpen = onOpenChange ? externalIsOpen : internalIsOpen;
+	const setIsOpen = onOpenChange || setInternalIsOpen;
+
+	// Initialize filtered countries when countries change
+	useEffect( () => {
+		setFilteredCountries( countries );
+	}, [ countries ] );
+
+	// Update selected country when selectedCountryCode or countries change
+	useEffect( () => {
+		if ( ! selectedCountryCode || ! countries.length ) {
+			setSelectedCountry( null );
+			return;
+		}
+
+		const country = countries.find( option => option.code === selectedCountryCode );
+		setSelectedCountry( country || null );
+	}, [ selectedCountryCode, countries ] );
+
+	// Filter countries based on search term
+	useEffect( () => {
+		if ( ! searchTerm ) {
+			setFilteredCountries( countries );
+			return;
+		}
+
+		const filtered = countries.filter(
+			country =>
+				country.country.toLowerCase().includes( searchTerm.toLowerCase() ) ||
+				country.value.toLowerCase().includes( searchTerm.toLowerCase() ) ||
+				country.code.toLowerCase().includes( searchTerm.toLowerCase() )
+		);
+		setFilteredCountries( filtered );
+	}, [ searchTerm, countries ] );
+
+	// Focus search input when combobox opens
+	useEffect( () => {
+		if ( isOpen && searchInputRef.current ) {
+			setTimeout( () => {
+				searchInputRef.current.focus();
+			}, 0 );
+		}
+	}, [ isOpen ] );
+
+	// Clear search term and reset focus when combobox closes
+	useEffect( () => {
+		if ( ! isOpen ) {
+			setSearchTerm( '' );
+			setFocusedOptionIndex( -1 );
+		}
+	}, [ isOpen ] );
+
+	// Reset focused option when filtered countries change
+	useEffect( () => {
+		setFocusedOptionIndex( -1 );
+	}, [ filteredCountries ] );
+
+	// Scroll focused option into view
+	useEffect( () => {
+		if ( focusedOptionIndex >= 0 && optionsRef.current[ focusedOptionIndex ] ) {
+			optionsRef.current[ focusedOptionIndex ].scrollIntoView( {
+				block: 'nearest',
+				behavior: 'smooth',
+			} );
+		}
+	}, [ focusedOptionIndex ] );
+
+	const handleToggle = useCallback( () => {
+		if ( disabled ) {
+			return;
+		}
+		setIsOpen( ! isOpen );
+	}, [ isOpen, setIsOpen, disabled ] );
+
+	const handleCountrySelect = useCallback(
+		event => {
+			if ( onCountryChange ) {
+				onCountryChange( event );
+			}
+			setIsOpen( false );
+		},
+		[ onCountryChange, setIsOpen ]
+	);
+
+	const handleSearchChange = useCallback( event => {
+		setSearchTerm( event.target.value );
+	}, [] );
+
+	const handleKeyDown = useCallback(
+		event => {
+			if ( ! isOpen ) {
+				return;
+			}
+
+			switch ( event.key ) {
+				case 'ArrowDown':
+					event.preventDefault();
+					setFocusedOptionIndex( prevIndex => {
+						const nextIndex = prevIndex < filteredCountries.length - 1 ? prevIndex + 1 : 0;
+						return nextIndex;
+					} );
+					break;
+
+				case 'ArrowUp':
+					event.preventDefault();
+					setFocusedOptionIndex( prevIndex => {
+						const nextIndex = prevIndex > 0 ? prevIndex - 1 : filteredCountries.length - 1;
+						return nextIndex;
+					} );
+					break;
+
+				case 'Enter':
+					event.preventDefault();
+					if ( focusedOptionIndex >= 0 && focusedOptionIndex < filteredCountries.length ) {
+						const selectedCountryOption = filteredCountries[ focusedOptionIndex ];
+						const mockEvent = {
+							target: { value: selectedCountryOption.code },
+							currentTarget: { value: selectedCountryOption.code },
+						};
+						if ( onCountryChange ) {
+							onCountryChange( mockEvent );
+						}
+						setIsOpen( false );
+					}
+					break;
+
+				case 'Escape':
+					event.preventDefault();
+					setIsOpen( false );
+					break;
+
+				default:
+					break;
+			}
+		},
+		[ isOpen, filteredCountries, focusedOptionIndex, onCountryChange, setIsOpen ]
+	);
+
+	// Don't render if no countries or no selected country
+	if ( ! countries.length || ! selectedCountry ) {
+		return null;
+	}
+
+	const triggerArrowClass = clsx( 'jetpack-combobox-trigger-arrow', {
+		'is-open': isOpen,
+	} );
+
+	return (
+		<div className={ clsx( 'jetpack-custom-combobox', className ) }>
+			<button
+				className="jetpack-combobox-trigger"
+				role="button"
+				tabIndex={ 0 }
+				onClick={ handleToggle }
+				onKeyDown={ event => {
+					if ( event.key === 'Enter' || event.key === ' ' ) {
+						event.preventDefault();
+						handleToggle();
+					} else if ( event.key === 'ArrowDown' ) {
+						event.preventDefault();
+						if ( ! isOpen ) {
+							handleToggle();
+						}
+					}
+				} }
+				disabled={ disabled }
+				aria-expanded={ isOpen }
+				aria-haspopup="listbox"
+			>
+				<span className="jetpack-combobox-selected">{ selectedCountry.flag }</span>
+				<span className={ triggerArrowClass }>&nbsp;</span>
+				<span className="jetpack-combobox-selected">{ selectedCountry.value }</span>
+			</button>
+
+			{ isOpen && (
+				<div className="jetpack-combobox-dropdown jetpack-combobox-open">
+					<input
+						ref={ searchInputRef }
+						className="jetpack-combobox-search"
+						type="text"
+						placeholder={ __( 'Search countries…', 'jetpack-forms' ) }
+						value={ searchTerm }
+						onChange={ handleSearchChange }
+						onKeyDown={ handleKeyDown }
+						role="combobox"
+						aria-expanded={ isOpen }
+						aria-autocomplete="list"
+						aria-activedescendant={
+							focusedOptionIndex >= 0
+								? `country-option-${ filteredCountries[ focusedOptionIndex ]?.code }`
+								: undefined
+						}
+					/>
+					<div className="jetpack-combobox-options" role="listbox">
+						{ filteredCountries.map( ( { country, flag, value, code }, index ) => {
+							const isFocused = index === focusedOptionIndex;
+							const isSelected = selectedCountry?.code === code;
+
+							return (
+								<button
+									key={ code }
+									ref={ el => {
+										optionsRef.current[ index ] = el;
+									} }
+									id={ `country-option-${ code }` }
+									className={ clsx( 'jetpack-combobox-option', {
+										'is-focused': isFocused,
+										'is-selected': isSelected,
+									} ) }
+									value={ code }
+									onClick={ handleCountrySelect }
+									onMouseEnter={ () => setFocusedOptionIndex( index ) }
+									role="option"
+									aria-selected={ isSelected }
+									tabIndex={ -1 }
+								>
+									<span className="jetpack-combobox-option-icon">{ flag }</span>
+									<span className="jetpack-combobox-option-value">{ value }</span>
+									<span className="jetpack-combobox-option-description">{ country }</span>
+								</button>
+							);
+						} ) }
+					</div>
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default CountryCombobox;
diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 1c39a9c9a6284..df540a3588f1e 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1045,6 +1045,7 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 					data-wp-init="callbacks.initializePhoneFieldCustomComboBox"
 					data-wp-on-document--click="actions.phoneComboboxDocumentClickHandler">
 					<div class="jetpack-custom-combobox">
+						
 						<button 
 							class="jetpack-combobox-trigger"
 							type="button"
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 59cd24e92d25b..0671d6a9b3635 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -84,6 +84,11 @@
 			color: inherit;
 			background-color: inherit;
 			z-index: 1;
+
+			&:focus {
+				outline: none;
+				box-shadow: none;
+			}
 		}
 
 		.jetpack-combobox-options {
@@ -98,16 +103,27 @@
 			align-items: center;
 			font-size: 14px;
 			transition: background-color 0.1s;
+			gap: 8px;
+			width: 100%;
+			background-color: transparent;
+			border: none;
+			line-height: inherit;
 
-			&:hover {
+			&:hover,
+			&.is-focused {
 				background-color: #f5f5f5;
 			}
 
 			&.jetpack-combobox-option-selected {
-				background-color: #f0f0f0;
+				background-color: #e6f3ff;
+				font-weight: 600;
 
 				&:hover {
-					background-color: #f0f0f0;
+					background-color: #e6f3ff;
+				}
+
+				&.is-focused {
+					background-color: #cce7ff;
 				}
 			}
 		}
@@ -116,14 +132,16 @@
 
 
 .jetpack-combobox-option-icon {
-	margin-right: 8px;
+	// margin-right: 8px;
+	pointer-events: none;
 }
 
 .jetpack-combobox-option-value {
 	font-weight: 500;
-	margin-right: 8px;
+	pointer-events: none;
 }
 
 .jetpack-combobox-option-description {
 	color: #666;
+	pointer-events: none;
 }

From d97d4aff34b24faa1e5e50f2594928c7b969738f Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 15:20:50 -0300
Subject: [PATCH 32/51] add navigation to combobox on editor

---
 .../forms/src/blocks/input-phone/edit.js      |  10 +-
 .../shared/components/country-combobox.js     | 268 ----------------
 .../shared/components/searchable-combobox.js  | 290 ++++++++++++++++++
 3 files changed, 295 insertions(+), 273 deletions(-)
 delete mode 100644 projects/packages/forms/src/blocks/shared/components/country-combobox.js
 create mode 100644 projects/packages/forms/src/blocks/shared/components/searchable-combobox.js

diff --git a/projects/packages/forms/src/blocks/input-phone/edit.js b/projects/packages/forms/src/blocks/input-phone/edit.js
index 36f4a8817af88..e9f68a1c7d6b5 100644
--- a/projects/packages/forms/src/blocks/input-phone/edit.js
+++ b/projects/packages/forms/src/blocks/input-phone/edit.js
@@ -1,6 +1,6 @@
 import { useBlockProps } from '@wordpress/block-editor';
 import { useCallback, useRef, useState, useEffect, useMemo } from '@wordpress/element';
-import CountryCombobox from '../shared/components/country-combobox';
+import SearchableCombobox from '../shared/components/searchable-combobox';
 import useInsertAfterOnEnterKeyDown from '../shared/hooks/use-insert-after-on-enter-key-down';
 import { useSyncedAttributes } from '../shared/hooks/use-synced-attributes';
 import useVariationStyleProperties from '../shared/hooks/use-variation-style-properties.js';
@@ -84,10 +84,10 @@ const PhoneInputEdit = ( { attributes, clientId, isSelected, name, setAttributes
 			<div { ...blockProps }>
 				{ showCountrySelector && countries.length > 1 && defaultPrefix && (
 					<div className="jetpack-field__input-prefix">
-						<CountryCombobox
-							countries={ countries }
-							selectedCountryCode={ defaultPrefix }
-							onCountryChange={ handleChangeDefaultPrefix }
+						<SearchableCombobox
+							options={ countries }
+							selectedOptionCode={ defaultPrefix }
+							onOptionChange={ handleChangeDefaultPrefix }
 							isOpen={ comboboxOpen }
 							onOpenChange={ setComboboxOpen }
 						/>
diff --git a/projects/packages/forms/src/blocks/shared/components/country-combobox.js b/projects/packages/forms/src/blocks/shared/components/country-combobox.js
deleted file mode 100644
index d6e24ece5c35f..0000000000000
--- a/projects/packages/forms/src/blocks/shared/components/country-combobox.js
+++ /dev/null
@@ -1,268 +0,0 @@
-import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-
-/**
- * CountryCombobox Component
- *
- * A reusable combobox component for selecting countries with search functionality.
- * Handles its own state management for open/closed state, filtering, and selection.
- *
- * @param {object}   props                     - The component props
- * @param {Array}    props.countries           - Array of country objects with code, country, flag, and value properties
- * @param {string}   props.selectedCountryCode - The currently selected country code
- * @param {Function} props.onCountryChange     - Callback function called when a country is selected
- * @param {boolean}  props.isOpen              - External control for combobox open state
- * @param {Function} props.onOpenChange        - Callback function for open state changes
- * @param {string}   props.className           - Additional CSS class names
- * @param {boolean}  props.disabled            - Whether the combobox is disabled
- * @return {Element|null} The CountryCombobox component or null if no countries/selectedCountry
- */
-const CountryCombobox = ( {
-	countries = [],
-	selectedCountryCode = null,
-	onCountryChange,
-	isOpen: externalIsOpen = false,
-	onOpenChange,
-	className = '',
-	disabled = false,
-} ) => {
-	const [ internalIsOpen, setInternalIsOpen ] = useState( false );
-	const [ filteredCountries, setFilteredCountries ] = useState( [] );
-	const [ searchTerm, setSearchTerm ] = useState( '' );
-	const [ selectedCountry, setSelectedCountry ] = useState( null );
-	const [ focusedOptionIndex, setFocusedOptionIndex ] = useState( -1 );
-	const searchInputRef = useRef( null );
-	const optionsRef = useRef( [] );
-
-	// Use external open state if provided, otherwise use internal state
-	const isOpen = onOpenChange ? externalIsOpen : internalIsOpen;
-	const setIsOpen = onOpenChange || setInternalIsOpen;
-
-	// Initialize filtered countries when countries change
-	useEffect( () => {
-		setFilteredCountries( countries );
-	}, [ countries ] );
-
-	// Update selected country when selectedCountryCode or countries change
-	useEffect( () => {
-		if ( ! selectedCountryCode || ! countries.length ) {
-			setSelectedCountry( null );
-			return;
-		}
-
-		const country = countries.find( option => option.code === selectedCountryCode );
-		setSelectedCountry( country || null );
-	}, [ selectedCountryCode, countries ] );
-
-	// Filter countries based on search term
-	useEffect( () => {
-		if ( ! searchTerm ) {
-			setFilteredCountries( countries );
-			return;
-		}
-
-		const filtered = countries.filter(
-			country =>
-				country.country.toLowerCase().includes( searchTerm.toLowerCase() ) ||
-				country.value.toLowerCase().includes( searchTerm.toLowerCase() ) ||
-				country.code.toLowerCase().includes( searchTerm.toLowerCase() )
-		);
-		setFilteredCountries( filtered );
-	}, [ searchTerm, countries ] );
-
-	// Focus search input when combobox opens
-	useEffect( () => {
-		if ( isOpen && searchInputRef.current ) {
-			setTimeout( () => {
-				searchInputRef.current.focus();
-			}, 0 );
-		}
-	}, [ isOpen ] );
-
-	// Clear search term and reset focus when combobox closes
-	useEffect( () => {
-		if ( ! isOpen ) {
-			setSearchTerm( '' );
-			setFocusedOptionIndex( -1 );
-		}
-	}, [ isOpen ] );
-
-	// Reset focused option when filtered countries change
-	useEffect( () => {
-		setFocusedOptionIndex( -1 );
-	}, [ filteredCountries ] );
-
-	// Scroll focused option into view
-	useEffect( () => {
-		if ( focusedOptionIndex >= 0 && optionsRef.current[ focusedOptionIndex ] ) {
-			optionsRef.current[ focusedOptionIndex ].scrollIntoView( {
-				block: 'nearest',
-				behavior: 'smooth',
-			} );
-		}
-	}, [ focusedOptionIndex ] );
-
-	const handleToggle = useCallback( () => {
-		if ( disabled ) {
-			return;
-		}
-		setIsOpen( ! isOpen );
-	}, [ isOpen, setIsOpen, disabled ] );
-
-	const handleCountrySelect = useCallback(
-		event => {
-			if ( onCountryChange ) {
-				onCountryChange( event );
-			}
-			setIsOpen( false );
-		},
-		[ onCountryChange, setIsOpen ]
-	);
-
-	const handleSearchChange = useCallback( event => {
-		setSearchTerm( event.target.value );
-	}, [] );
-
-	const handleKeyDown = useCallback(
-		event => {
-			if ( ! isOpen ) {
-				return;
-			}
-
-			switch ( event.key ) {
-				case 'ArrowDown':
-					event.preventDefault();
-					setFocusedOptionIndex( prevIndex => {
-						const nextIndex = prevIndex < filteredCountries.length - 1 ? prevIndex + 1 : 0;
-						return nextIndex;
-					} );
-					break;
-
-				case 'ArrowUp':
-					event.preventDefault();
-					setFocusedOptionIndex( prevIndex => {
-						const nextIndex = prevIndex > 0 ? prevIndex - 1 : filteredCountries.length - 1;
-						return nextIndex;
-					} );
-					break;
-
-				case 'Enter':
-					event.preventDefault();
-					if ( focusedOptionIndex >= 0 && focusedOptionIndex < filteredCountries.length ) {
-						const selectedCountryOption = filteredCountries[ focusedOptionIndex ];
-						const mockEvent = {
-							target: { value: selectedCountryOption.code },
-							currentTarget: { value: selectedCountryOption.code },
-						};
-						if ( onCountryChange ) {
-							onCountryChange( mockEvent );
-						}
-						setIsOpen( false );
-					}
-					break;
-
-				case 'Escape':
-					event.preventDefault();
-					setIsOpen( false );
-					break;
-
-				default:
-					break;
-			}
-		},
-		[ isOpen, filteredCountries, focusedOptionIndex, onCountryChange, setIsOpen ]
-	);
-
-	// Don't render if no countries or no selected country
-	if ( ! countries.length || ! selectedCountry ) {
-		return null;
-	}
-
-	const triggerArrowClass = clsx( 'jetpack-combobox-trigger-arrow', {
-		'is-open': isOpen,
-	} );
-
-	return (
-		<div className={ clsx( 'jetpack-custom-combobox', className ) }>
-			<button
-				className="jetpack-combobox-trigger"
-				role="button"
-				tabIndex={ 0 }
-				onClick={ handleToggle }
-				onKeyDown={ event => {
-					if ( event.key === 'Enter' || event.key === ' ' ) {
-						event.preventDefault();
-						handleToggle();
-					} else if ( event.key === 'ArrowDown' ) {
-						event.preventDefault();
-						if ( ! isOpen ) {
-							handleToggle();
-						}
-					}
-				} }
-				disabled={ disabled }
-				aria-expanded={ isOpen }
-				aria-haspopup="listbox"
-			>
-				<span className="jetpack-combobox-selected">{ selectedCountry.flag }</span>
-				<span className={ triggerArrowClass }>&nbsp;</span>
-				<span className="jetpack-combobox-selected">{ selectedCountry.value }</span>
-			</button>
-
-			{ isOpen && (
-				<div className="jetpack-combobox-dropdown jetpack-combobox-open">
-					<input
-						ref={ searchInputRef }
-						className="jetpack-combobox-search"
-						type="text"
-						placeholder={ __( 'Search countries…', 'jetpack-forms' ) }
-						value={ searchTerm }
-						onChange={ handleSearchChange }
-						onKeyDown={ handleKeyDown }
-						role="combobox"
-						aria-expanded={ isOpen }
-						aria-autocomplete="list"
-						aria-activedescendant={
-							focusedOptionIndex >= 0
-								? `country-option-${ filteredCountries[ focusedOptionIndex ]?.code }`
-								: undefined
-						}
-					/>
-					<div className="jetpack-combobox-options" role="listbox">
-						{ filteredCountries.map( ( { country, flag, value, code }, index ) => {
-							const isFocused = index === focusedOptionIndex;
-							const isSelected = selectedCountry?.code === code;
-
-							return (
-								<button
-									key={ code }
-									ref={ el => {
-										optionsRef.current[ index ] = el;
-									} }
-									id={ `country-option-${ code }` }
-									className={ clsx( 'jetpack-combobox-option', {
-										'is-focused': isFocused,
-										'is-selected': isSelected,
-									} ) }
-									value={ code }
-									onClick={ handleCountrySelect }
-									onMouseEnter={ () => setFocusedOptionIndex( index ) }
-									role="option"
-									aria-selected={ isSelected }
-									tabIndex={ -1 }
-								>
-									<span className="jetpack-combobox-option-icon">{ flag }</span>
-									<span className="jetpack-combobox-option-value">{ value }</span>
-									<span className="jetpack-combobox-option-description">{ country }</span>
-								</button>
-							);
-						} ) }
-					</div>
-				</div>
-			) }
-		</div>
-	);
-};
-
-export default CountryCombobox;
diff --git a/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
new file mode 100644
index 0000000000000..2611f8fe48b4c
--- /dev/null
+++ b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
@@ -0,0 +1,290 @@
+import { KeyboardShortcuts } from '@wordpress/components';
+import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+
+/**
+ * Combobox Component
+ *
+ * A reusable combobox component for selecting options with search functionality.
+ * Handles its own state management for open/closed state, filtering, and selection.
+ * Uses WordPress KeyboardShortcuts component for proper block editor keyboard event handling.
+ *
+ * @param {object}   props                    - The component props
+ * @param {Array}    props.options            - Array of country objects with code, country, flag, and value properties
+ * @param {string}   props.selectedOptionCode - The currently selected country code
+ * @param {Function} props.onOptionChange     - Callback function called when a country is selected
+ * @param {boolean}  props.isOpen             - External control for combobox open state
+ * @param {Function} props.onOpenChange       - Callback function for open state changes
+ * @param {string}   props.className          - Additional CSS class names
+ * @param {boolean}  props.disabled           - Whether the combobox is disabled
+ * @return {Element|null} The SearchableCombobox component or null if no options/selectedOption
+ */
+const SearchableCombobox = ( {
+	options = [],
+	selectedOptionCode = null,
+	onOptionChange,
+	isOpen: externalIsOpen = false,
+	onOpenChange,
+	className = '',
+	disabled = false,
+} ) => {
+	const [ internalIsOpen, setInternalIsOpen ] = useState( false );
+	const [ filteredOptions, setFilteredOptions ] = useState( [] );
+	const [ searchTerm, setSearchTerm ] = useState( '' );
+	const [ selectedOption, setSelectedOption ] = useState( null );
+	const [ focusedOptionIndex, setFocusedOptionIndex ] = useState( -1 );
+	const searchInputRef = useRef( null );
+	const optionsRef = useRef( [] );
+
+	// Use external open state if provided, otherwise use internal state
+	const isOpen = onOpenChange ? externalIsOpen : internalIsOpen;
+	const setIsOpen = onOpenChange || setInternalIsOpen;
+
+	// Initialize filtered options when options change
+	useEffect( () => {
+		setFilteredOptions( options );
+	}, [ options ] );
+
+	// Update selected country when selectedOptionCode or options change
+	useEffect( () => {
+		if ( ! selectedOptionCode || ! options.length ) {
+			setSelectedOption( null );
+			return;
+		}
+
+		const country = options.find( option => option.code === selectedOptionCode );
+		setSelectedOption( country || null );
+	}, [ selectedOptionCode, options ] );
+
+	// Filter options based on search term
+	useEffect( () => {
+		if ( ! searchTerm ) {
+			setFilteredOptions( options );
+			return;
+		}
+
+		const filtered = options.filter(
+			country =>
+				country.country.toLowerCase().includes( searchTerm.toLowerCase() ) ||
+				country.value.toLowerCase().includes( searchTerm.toLowerCase() ) ||
+				country.code.toLowerCase().includes( searchTerm.toLowerCase() )
+		);
+		setFilteredOptions( filtered );
+	}, [ searchTerm, options ] );
+
+	// Focus search input when combobox opens
+	useEffect( () => {
+		if ( isOpen && searchInputRef.current ) {
+			setTimeout( () => {
+				searchInputRef.current.focus();
+			}, 0 );
+		}
+	}, [ isOpen ] );
+
+	// Clear search term and reset focus when combobox closes
+	useEffect( () => {
+		if ( ! isOpen ) {
+			setSearchTerm( '' );
+			setFocusedOptionIndex( -1 );
+		}
+	}, [ isOpen ] );
+
+	// Reset focused option when filtered options change
+	useEffect( () => {
+		setFocusedOptionIndex( -1 );
+	}, [ filteredOptions ] );
+
+	// Scroll focused option into view
+	useEffect( () => {
+		if ( focusedOptionIndex >= 0 && optionsRef.current[ focusedOptionIndex ] ) {
+			optionsRef.current[ focusedOptionIndex ].scrollIntoView( {
+				block: 'nearest',
+				behavior: 'auto',
+			} );
+		}
+	}, [ focusedOptionIndex ] );
+
+	const handleToggle = useCallback( () => {
+		if ( disabled ) {
+			return;
+		}
+		setIsOpen( ! isOpen );
+	}, [ isOpen, setIsOpen, disabled ] );
+
+	const handleCountrySelect = useCallback(
+		event => {
+			if ( onOptionChange ) {
+				onOptionChange( event );
+			}
+			setIsOpen( false );
+		},
+		[ onOptionChange, setIsOpen ]
+	);
+
+	const handleSearchChange = useCallback( event => {
+		setSearchTerm( event.target.value );
+	}, [] );
+
+	// Keyboard shortcut handlers - using consistent function references as required by KeyboardShortcuts
+	const handleArrowDown = useCallback(
+		event => {
+			if ( ! isOpen ) {
+				return;
+			}
+			event.preventDefault();
+			setFocusedOptionIndex( prevIndex => {
+				const nextIndex = prevIndex < filteredOptions.length - 1 ? prevIndex + 1 : 0;
+				return nextIndex;
+			} );
+		},
+		[ isOpen, filteredOptions.length, setFocusedOptionIndex ]
+	);
+
+	const handleArrowUp = useCallback(
+		event => {
+			if ( ! isOpen ) {
+				return;
+			}
+			event.preventDefault();
+			setFocusedOptionIndex( prevIndex => {
+				const nextIndex = prevIndex > 0 ? prevIndex - 1 : filteredOptions.length - 1;
+				return nextIndex;
+			} );
+		},
+		[ isOpen, filteredOptions.length, setFocusedOptionIndex ]
+	);
+
+	const handleEnter = useCallback(
+		event => {
+			if ( ! isOpen ) {
+				return;
+			}
+			event.preventDefault();
+			if ( focusedOptionIndex >= 0 && focusedOptionIndex < filteredOptions.length ) {
+				const selectedCountryOption = filteredOptions[ focusedOptionIndex ];
+				const mockEvent = {
+					target: { value: selectedCountryOption.code },
+					currentTarget: { value: selectedCountryOption.code },
+				};
+				if ( onOptionChange ) {
+					onOptionChange( mockEvent );
+				}
+				setIsOpen( false );
+			}
+		},
+		[ isOpen, focusedOptionIndex, filteredOptions, onOptionChange, setIsOpen ]
+	);
+
+	const handleEscape = useCallback(
+		event => {
+			if ( ! isOpen ) {
+				return;
+			}
+			event.preventDefault();
+			setIsOpen( false );
+		},
+		[ isOpen, setIsOpen ]
+	);
+
+	// Keyboard shortcuts object for KeyboardShortcuts component
+	const shortcuts = {
+		down: handleArrowDown,
+		up: handleArrowUp,
+		enter: handleEnter,
+		esc: handleEscape,
+	};
+
+	// Don't render if no options or no selected country
+	if ( ! options.length || ! selectedOption ) {
+		return null;
+	}
+
+	const triggerArrowClass = clsx( 'jetpack-combobox-trigger-arrow', {
+		'is-open': isOpen,
+	} );
+
+	return (
+		<div className={ clsx( 'jetpack-custom-combobox', className ) }>
+			<button
+				className="jetpack-combobox-trigger"
+				role="button"
+				tabIndex={ 0 }
+				onClick={ handleToggle }
+				onKeyDown={ event => {
+					if ( event.key === 'Enter' || event.key === ' ' ) {
+						event.preventDefault();
+						handleToggle();
+					} else if ( event.key === 'ArrowDown' ) {
+						event.preventDefault();
+						if ( ! isOpen ) {
+							handleToggle();
+						}
+					}
+				} }
+				disabled={ disabled }
+				aria-expanded={ isOpen }
+				aria-haspopup="listbox"
+			>
+				<span className="jetpack-combobox-selected">{ selectedOption.flag }</span>
+				<span className={ triggerArrowClass }>&nbsp;</span>
+				<span className="jetpack-combobox-selected">{ selectedOption.value }</span>
+			</button>
+
+			{ isOpen && (
+				<KeyboardShortcuts bindGlobal={ true } shortcuts={ shortcuts }>
+					<div className="jetpack-combobox-dropdown jetpack-combobox-open">
+						<input
+							ref={ searchInputRef }
+							className="jetpack-combobox-search"
+							type="text"
+							placeholder={ __( 'Search countries…', 'jetpack-forms' ) }
+							value={ searchTerm }
+							onChange={ handleSearchChange }
+							role="combobox"
+							aria-expanded={ isOpen }
+							aria-autocomplete="list"
+							aria-activedescendant={
+								focusedOptionIndex >= 0
+									? `country-option-${ filteredOptions[ focusedOptionIndex ]?.code }`
+									: undefined
+							}
+						/>
+						<div className="jetpack-combobox-options" role="listbox">
+							{ filteredOptions.map( ( { country, flag, value, code }, index ) => {
+								const isFocused = index === focusedOptionIndex;
+								const isSelected = selectedOption?.code === code;
+
+								return (
+									<button
+										key={ code }
+										ref={ el => {
+											optionsRef.current[ index ] = el;
+										} }
+										id={ `country-option-${ code }` }
+										className={ clsx( 'jetpack-combobox-option', {
+											'is-focused': isFocused,
+											'jetpack-combobox-option-selected': isSelected,
+										} ) }
+										value={ code }
+										onClick={ handleCountrySelect }
+										onMouseEnter={ () => setFocusedOptionIndex( index ) }
+										role="option"
+										aria-selected={ isSelected }
+										tabIndex={ -1 }
+									>
+										<span className="jetpack-combobox-option-icon">{ flag }</span>
+										<span className="jetpack-combobox-option-value">{ value }</span>
+										<span className="jetpack-combobox-option-description">{ country }</span>
+									</button>
+								);
+							} ) }
+						</div>
+					</div>
+				</KeyboardShortcuts>
+			) }
+		</div>
+	);
+};
+
+export default SearchableCombobox;

From 668151949fadc252b81221cf9404af811a369e36 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 15:56:46 -0300
Subject: [PATCH 33/51] make it a bit more agnostic

---
 .../forms/src/blocks/input-phone/edit.js      |  2 +
 .../shared/components/searchable-combobox.js  | 64 +++++++++++++------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/projects/packages/forms/src/blocks/input-phone/edit.js b/projects/packages/forms/src/blocks/input-phone/edit.js
index e9f68a1c7d6b5..d075f44bd00b0 100644
--- a/projects/packages/forms/src/blocks/input-phone/edit.js
+++ b/projects/packages/forms/src/blocks/input-phone/edit.js
@@ -1,5 +1,6 @@
 import { useBlockProps } from '@wordpress/block-editor';
 import { useCallback, useRef, useState, useEffect, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import SearchableCombobox from '../shared/components/searchable-combobox';
 import useInsertAfterOnEnterKeyDown from '../shared/hooks/use-insert-after-on-enter-key-down';
 import { useSyncedAttributes } from '../shared/hooks/use-synced-attributes';
@@ -90,6 +91,7 @@ const PhoneInputEdit = ( { attributes, clientId, isSelected, name, setAttributes
 							onOptionChange={ handleChangeDefaultPrefix }
 							isOpen={ comboboxOpen }
 							onOpenChange={ setComboboxOpen }
+							placeholer={ __( 'Search countries…', 'jetpack-forms' ) }
 						/>
 					</div>
 				) }
diff --git a/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
index 2611f8fe48b4c..c345feba5d5d1 100644
--- a/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
+++ b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
@@ -9,15 +9,17 @@ import clsx from 'clsx';
  * A reusable combobox component for selecting options with search functionality.
  * Handles its own state management for open/closed state, filtering, and selection.
  * Uses WordPress KeyboardShortcuts component for proper block editor keyboard event handling.
+ * Automatically scrolls to the selected option when the combobox opens.
  *
  * @param {object}   props                    - The component props
- * @param {Array}    props.options            - Array of country objects with code, country, flag, and value properties
- * @param {string}   props.selectedOptionCode - The currently selected country code
- * @param {Function} props.onOptionChange     - Callback function called when a country is selected
+ * @param {Array}    props.options            - Array of options objects with code, country, flag, and value properties
+ * @param {string}   props.selectedOptionCode - The currently selected option code
+ * @param {Function} props.onOptionChange     - Callback function called when an option is selected
  * @param {boolean}  props.isOpen             - External control for combobox open state
  * @param {Function} props.onOpenChange       - Callback function for open state changes
  * @param {string}   props.className          - Additional CSS class names
  * @param {boolean}  props.disabled           - Whether the combobox is disabled
+ * @param {string}   props.placeholder        - The placeholder text for the search input
  * @return {Element|null} The SearchableCombobox component or null if no options/selectedOption
  */
 const SearchableCombobox = ( {
@@ -28,6 +30,7 @@ const SearchableCombobox = ( {
 	onOpenChange,
 	className = '',
 	disabled = false,
+	placeholder = __( 'Search…', 'jetpack-forms' ),
 } ) => {
 	const [ internalIsOpen, setInternalIsOpen ] = useState( false );
 	const [ filteredOptions, setFilteredOptions ] = useState( [] );
@@ -46,15 +49,15 @@ const SearchableCombobox = ( {
 		setFilteredOptions( options );
 	}, [ options ] );
 
-	// Update selected country when selectedOptionCode or options change
+	// Update selected option when selectedOptionCode or options change
 	useEffect( () => {
 		if ( ! selectedOptionCode || ! options.length ) {
 			setSelectedOption( null );
 			return;
 		}
 
-		const country = options.find( option => option.code === selectedOptionCode );
-		setSelectedOption( country || null );
+		const option = options.find( opt => opt.code === selectedOptionCode );
+		setSelectedOption( option || null );
 	}, [ selectedOptionCode, options ] );
 
 	// Filter options based on search term
@@ -65,10 +68,10 @@ const SearchableCombobox = ( {
 		}
 
 		const filtered = options.filter(
-			country =>
-				country.country.toLowerCase().includes( searchTerm.toLowerCase() ) ||
-				country.value.toLowerCase().includes( searchTerm.toLowerCase() ) ||
-				country.code.toLowerCase().includes( searchTerm.toLowerCase() )
+			option =>
+				option.country.toLowerCase().includes( searchTerm.toLowerCase() ) ||
+				option.value.toLowerCase().includes( searchTerm.toLowerCase() ) ||
+				option.code.toLowerCase().includes( searchTerm.toLowerCase() )
 		);
 		setFilteredOptions( filtered );
 	}, [ searchTerm, options ] );
@@ -105,6 +108,28 @@ const SearchableCombobox = ( {
 		}
 	}, [ focusedOptionIndex ] );
 
+	// Scroll to selected option when combobox opens
+	useEffect( () => {
+		if ( isOpen && selectedOption && filteredOptions.length > 0 ) {
+			// Find the index of the selected option in the filtered options
+			const selectedIndex = filteredOptions.findIndex(
+				option => option.code === selectedOption.code
+			);
+
+			// Scroll to the selected option if found
+			if ( selectedIndex >= 0 && optionsRef.current[ selectedIndex ] ) {
+				// Use setTimeout to ensure the DOM has been rendered
+				setTimeout( () => {
+					optionsRef.current[ selectedIndex ].scrollIntoView( {
+						block: 'nearest',
+						container: 'nearest',
+						behavior: 'instant',
+					} );
+				}, 0 );
+			}
+		}
+	}, [ isOpen, selectedOption, filteredOptions ] );
+
 	const handleToggle = useCallback( () => {
 		if ( disabled ) {
 			return;
@@ -112,7 +137,7 @@ const SearchableCombobox = ( {
 		setIsOpen( ! isOpen );
 	}, [ isOpen, setIsOpen, disabled ] );
 
-	const handleCountrySelect = useCallback(
+	const handleOptionSelect = useCallback(
 		event => {
 			if ( onOptionChange ) {
 				onOptionChange( event );
@@ -162,10 +187,10 @@ const SearchableCombobox = ( {
 			}
 			event.preventDefault();
 			if ( focusedOptionIndex >= 0 && focusedOptionIndex < filteredOptions.length ) {
-				const selectedCountryOption = filteredOptions[ focusedOptionIndex ];
+				const focusedOption = filteredOptions[ focusedOptionIndex ];
 				const mockEvent = {
-					target: { value: selectedCountryOption.code },
-					currentTarget: { value: selectedCountryOption.code },
+					target: { value: focusedOption.code },
+					currentTarget: { value: focusedOption.code },
 				};
 				if ( onOptionChange ) {
 					onOptionChange( mockEvent );
@@ -195,7 +220,7 @@ const SearchableCombobox = ( {
 		esc: handleEscape,
 	};
 
-	// Don't render if no options or no selected country
+	// Don't render if no options or no selected option
 	if ( ! options.length || ! selectedOption ) {
 		return null;
 	}
@@ -238,7 +263,7 @@ const SearchableCombobox = ( {
 							ref={ searchInputRef }
 							className="jetpack-combobox-search"
 							type="text"
-							placeholder={ __( 'Search countries…', 'jetpack-forms' ) }
+							placeholder={ placeholder }
 							value={ searchTerm }
 							onChange={ handleSearchChange }
 							role="combobox"
@@ -246,7 +271,7 @@ const SearchableCombobox = ( {
 							aria-autocomplete="list"
 							aria-activedescendant={
 								focusedOptionIndex >= 0
-									? `country-option-${ filteredOptions[ focusedOptionIndex ]?.code }`
+									? `option-${ filteredOptions[ focusedOptionIndex ]?.code }`
 									: undefined
 							}
 						/>
@@ -261,14 +286,13 @@ const SearchableCombobox = ( {
 										ref={ el => {
 											optionsRef.current[ index ] = el;
 										} }
-										id={ `country-option-${ code }` }
+										id={ `option-${ code }` }
 										className={ clsx( 'jetpack-combobox-option', {
 											'is-focused': isFocused,
 											'jetpack-combobox-option-selected': isSelected,
 										} ) }
 										value={ code }
-										onClick={ handleCountrySelect }
-										onMouseEnter={ () => setFocusedOptionIndex( index ) }
+										onClick={ handleOptionSelect }
 										role="option"
 										aria-selected={ isSelected }
 										tabIndex={ -1 }

From ada760473a08240edaad64b689810652eee8abd6 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 16:17:24 -0300
Subject: [PATCH 34/51] allow enter to select the first option if the user has
 performed a search

---
 .../src/blocks/shared/components/searchable-combobox.js  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
index c345feba5d5d1..ab3a6255418f6 100644
--- a/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
+++ b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
@@ -186,8 +186,13 @@ const SearchableCombobox = ( {
 				return;
 			}
 			event.preventDefault();
+			let focusedOption = null;
 			if ( focusedOptionIndex >= 0 && focusedOptionIndex < filteredOptions.length ) {
-				const focusedOption = filteredOptions[ focusedOptionIndex ];
+				focusedOption = filteredOptions[ focusedOptionIndex ];
+			} else if ( filteredOptions.length > 0 && searchTerm ) {
+				focusedOption = filteredOptions[ 0 ];
+			}
+			if ( focusedOption ) {
 				const mockEvent = {
 					target: { value: focusedOption.code },
 					currentTarget: { value: focusedOption.code },
@@ -198,7 +203,7 @@ const SearchableCombobox = ( {
 				setIsOpen( false );
 			}
 		},
-		[ isOpen, focusedOptionIndex, filteredOptions, onOptionChange, setIsOpen ]
+		[ isOpen, focusedOptionIndex, filteredOptions, onOptionChange, setIsOpen, searchTerm ]
 	);
 
 	const handleEscape = useCallback(

From baad8ceb6ae2d5ca965dd50b7cb08da9b010c069 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 16:33:44 -0300
Subject: [PATCH 35/51] address PR comments

---
 .../forms/src/blocks/field-telephone/edit.js  | 45 +++----------------
 .../forms/src/blocks/input-phone/index.js     |  7 +--
 2 files changed, 9 insertions(+), 43 deletions(-)

diff --git a/projects/packages/forms/src/blocks/field-telephone/edit.js b/projects/packages/forms/src/blocks/field-telephone/edit.js
index ffa1e0457c336..91137aec1d621 100644
--- a/projects/packages/forms/src/blocks/field-telephone/edit.js
+++ b/projects/packages/forms/src/blocks/field-telephone/edit.js
@@ -5,13 +5,7 @@ import {
 	BlockContextProvider,
 	BlockControls,
 } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	ToggleControl,
-	ToolbarButton,
-	ToolbarGroup,
-	SelectControl,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { globe } from '@wordpress/icons';
@@ -45,16 +39,11 @@ export default function PhoneFieldEdit( props ) {
 	const { isInnerBlockSelected, hasPlaceholder } = useFieldSelected( clientId );
 	const { blockStyle } = useJetpackFieldStyles( attributes );
 	const blockProps = useBlockProps( {
-		className: clsx(
-			'jetpack-field',
-			'jetpack-field-phone',
-			'jetpack-field-telephone',
-			width ? ` jetpack-field__width-${ width }` : '',
-			{
-				'is-selected': isSelected || isInnerBlockSelected,
-				'has-placeholder': hasPlaceholder,
-			}
-		),
+		className: clsx( 'jetpack-field', 'jetpack-field-phone', 'jetpack-field-telephone', {
+			[ `jetpack-field__width-${ width }` ]: width,
+			'is-selected': isSelected || isInnerBlockSelected,
+			'has-placeholder': hasPlaceholder,
+		} ),
 		style: blockStyle,
 	} );
 
@@ -67,13 +56,6 @@ export default function PhoneFieldEdit( props ) {
 		} ) );
 	}, [] );
 
-	const countryPairsWithNames = useMemo( () => {
-		return countries.map( country => ( {
-			label: country.country + ' ' + country.label,
-			value: country.code,
-		} ) );
-	}, [] );
-
 	const onChangeShowCountrySelector = value => {
 		if ( ! isBoolean( value ) ) {
 			// if not a boolean (ie, event object), toggle the value
@@ -113,9 +95,7 @@ export default function PhoneFieldEdit( props ) {
 	// Handler is provided as context from edit as index.js can't pass it as a prop.
 	const onChangeDefaultCountry = useCallback(
 		event => {
-			// if event is an array, we're using the select control
-			const value = Array.isArray( event ) ? event[ 0 ] : event.target.value;
-			setAttributes( { default: value } );
+			setAttributes( { default: event.target.value } );
 		},
 		[ setAttributes ]
 	);
@@ -150,17 +130,6 @@ export default function PhoneFieldEdit( props ) {
 						onChange={ onChangeShowCountrySelector }
 						__nextHasNoMarginBottom={ true }
 					/>
-					{ showCountrySelector && (
-						<SelectControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
-							label={ __( 'Default country', 'jetpack-forms' ) }
-							multiple
-							onChange={ onChangeDefaultCountry }
-							options={ countryPairsWithNames }
-							value={ [ defaultCountry ] }
-						/>
-					) }
 				</PanelBody>
 			</InspectorControls>
 
diff --git a/projects/packages/forms/src/blocks/input-phone/index.js b/projects/packages/forms/src/blocks/input-phone/index.js
index 91eea00298918..f3f91e37f6244 100644
--- a/projects/packages/forms/src/blocks/input-phone/index.js
+++ b/projects/packages/forms/src/blocks/input-phone/index.js
@@ -7,11 +7,8 @@ import save from './save';
 const name = 'phone-input';
 const settings = {
 	apiVersion: 3,
-	title: __( 'Phone Input', 'jetpack-forms' ),
-	description: __(
-		'A compound input for phone numbers with international support.',
-		'jetpack-forms'
-	),
+	title: __( 'Phone input', 'jetpack-forms' ),
+	description: __( 'Phone number input.', 'jetpack-forms' ),
 	category: 'contact-form',
 	icon: {
 		src: renderMaterialIcon(

From 9fc296be43204e11433010302cec805d50b55a32 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 17:10:47 -0300
Subject: [PATCH 36/51] inherit background color so input background is
 honored, but it's tricky, needs testing

---
 .../forms/src/blocks/input-phone/editor.scss  |  1 +
 .../forms/src/contact-form/css/combobox.scss  | 21 ++++++++++++-------
 .../src/contact-form/css/phone-field.scss     |  1 +
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/projects/packages/forms/src/blocks/input-phone/editor.scss b/projects/packages/forms/src/blocks/input-phone/editor.scss
index 86874c70530aa..7367b3ecb376b 100644
--- a/projects/packages/forms/src/blocks/input-phone/editor.scss
+++ b/projects/packages/forms/src/blocks/input-phone/editor.scss
@@ -68,6 +68,7 @@
 			color: inherit;
 			display: flex;
 			max-width: 40%;
+			background-color: inherit;
 
 			// these class is used to style select elements
 			.jetpack-field__input-element {
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 0671d6a9b3635..b2121135cb767 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -2,6 +2,12 @@
 .jetpack-custom-combobox {
 	position: relative;
 	letter-spacing: normal; // don't let input attributes rule over this
+	background-color: inherit;
+
+	// keyboardShortcuts adds a wrapping div, so we need to style it
+	> div {
+		background-color: inherit;
+	}
 
 	.jetpack-combobox-trigger {
 		width: 100%;
@@ -54,19 +60,20 @@
 
 	.jetpack-combobox-dropdown {
 		position: absolute;
-		top: 100%;
+		top: calc(var(--jetpack--contact-form--line-height, 100%) * 1.5);
 		left: 0;
 		right: 0;
 
-		background-color: var(--jetpack--contact-form--input-background-fallback, #fff);
+		background-color: inherit;
 		border: 1px solid #ddd;
 		border-top: none;
 		border-radius: 0 0 4px 4px;
-		max-height: 200px;
+		max-height: calc(var(--jetpack--contact-form--line-height, 25px) * 8);
 		z-index: 1000;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-		width: 250px;
+		width: max-content;
 		overflow: hidden;
+		max-width: 80vw;
 
 		&.jetpack-combobox-open {
 			display: block;
@@ -92,7 +99,7 @@
 		}
 
 		.jetpack-combobox-options {
-			max-height: 150px;
+			max-height: calc(var(--jetpack--contact-form--line-height, 25px) * 7);
 			overflow-y: auto;
 		}
 
@@ -115,11 +122,11 @@
 			}
 
 			&.jetpack-combobox-option-selected {
-				background-color: #e6f3ff;
+				background-color: #f5f5f5;
 				font-weight: 600;
 
 				&:hover {
-					background-color: #e6f3ff;
+					background-color: #f5f5f5;
 				}
 
 				&.is-focused {
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 22e1f96ddf8cc..b1394ef0a85fb 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -27,6 +27,7 @@
 		}
 
 		.jetpack-field__input-prefix:not([hidden]) {
+			background-color: inherit;
 
 			.jetpack-field__input-element {
 				width: 100%;

From dd6a3e91282cd51d9a43d8163a1cf6e0c7d99a86 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 17:28:49 -0300
Subject: [PATCH 37/51] adjust colors to inherit from current

---
 .../packages/forms/src/blocks/input-phone/editor.scss     | 1 +
 .../packages/forms/src/contact-form/css/combobox.scss     | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/blocks/input-phone/editor.scss b/projects/packages/forms/src/blocks/input-phone/editor.scss
index 7367b3ecb376b..c016ce9cad9b0 100644
--- a/projects/packages/forms/src/blocks/input-phone/editor.scss
+++ b/projects/packages/forms/src/blocks/input-phone/editor.scss
@@ -69,6 +69,7 @@
 			display: flex;
 			max-width: 40%;
 			background-color: inherit;
+			align-items: center;
 
 			// these class is used to style select elements
 			.jetpack-field__input-element {
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index b2121135cb767..37bcd58e4b0c3 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -6,6 +6,7 @@
 
 	// keyboardShortcuts adds a wrapping div, so we need to style it
 	> div {
+		color: currentColor;
 		background-color: inherit;
 	}
 
@@ -101,6 +102,7 @@
 		.jetpack-combobox-options {
 			max-height: calc(var(--jetpack--contact-form--line-height, 25px) * 7);
 			overflow-y: auto;
+			color: currentColor;
 		}
 
 		.jetpack-combobox-option {
@@ -115,6 +117,7 @@
 			background-color: transparent;
 			border: none;
 			line-height: inherit;
+			color: currentColor;
 
 			&:hover,
 			&.is-focused {
@@ -139,16 +142,17 @@
 
 
 .jetpack-combobox-option-icon {
-	// margin-right: 8px;
+	color: currentColor;
 	pointer-events: none;
 }
 
 .jetpack-combobox-option-value {
 	font-weight: 500;
 	pointer-events: none;
+	color: currentColor;
 }
 
 .jetpack-combobox-option-description {
-	color: #666;
 	pointer-events: none;
+	color: currentColor;
 }

From c4c370ce7186d3245eaadd355808f0c8b0c58438 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 18:41:18 -0300
Subject: [PATCH 38/51] address more PR comments

---
 projects/packages/forms/src/contact-form/css/combobox.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 37bcd58e4b0c3..d76c113544bf9 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -74,7 +74,7 @@
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 		width: max-content;
 		overflow: hidden;
-		max-width: 80vw;
+		max-width: 75vw;
 
 		&.jetpack-combobox-open {
 			display: block;
@@ -109,7 +109,7 @@
 			padding: 8px 12px;
 			cursor: pointer;
 			display: flex;
-			align-items: center;
+			align-items: flex-start;
 			font-size: 14px;
 			transition: background-color 0.1s;
 			gap: 8px;

From 8a703baea46ceca813555ff49df97892dfe382d6 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 18:42:03 -0300
Subject: [PATCH 39/51] need to rebuild css class names as they come with
 'class=' attached, including quotes

---
 .../src/contact-form/class-contact-form-field.php      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index df540a3588f1e..b0d25b5136117 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -995,6 +995,10 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 
 		$this->enqueue_phone_field_assets();
 
+		// $class is ill-formed, so we need to fix it
+		// Strip 'class=' and quotes to get just the class names
+		$class_names = preg_replace( "/^class=['\"]([^'\"]*)['\"].*$/", '$1', $class );
+
 		$link_label_id = $id . '-number';
 
 		$this->set_invalid_message( 'phone', __( 'Please enter a valid phone number', 'jetpack-forms' ) );
@@ -1012,7 +1016,8 @@ public function render_telephone_field( $id, $label, $value, $class, $required,
 		wp_interactivity_config( 'jetpack/field-phone', $global_config );
 		ob_start();
 		?>
-		<div class="jetpack-field__input-phone-wrapper <?php echo esc_attr( $this->get_attribute( 'stylevariationclasses' ) ); ?>"
+		<div
+			class="jetpack-field__input-phone-wrapper <?php echo esc_attr( $this->get_attribute( 'stylevariationclasses' ) ); ?> <?php echo esc_attr( $class_names ); ?>"
 			style="<?php echo ( ! empty( $this->field_styles ) && is_string( $this->field_styles ) ? esc_attr( $this->field_styles ) : '' ); ?>"
 			data-wp-on--jetpack-form-reset='actions.phoneResetHandler'
 			data-wp-init="callbacks.initializePhoneField"
@@ -1089,8 +1094,9 @@ class="jetpack-combobox-option"
 					</div>
 				</div>
 				<input
+					class="jetpack-field__input-element"
 					<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- both are escaped in calling function ?>
-					<?php echo $class; ?> <?php echo $placeholder; ?>
+					<?php echo $placeholder; ?>
 					type="tel"
 					<?php if ( $required ) { ?>
 						required="true"

From 4cd77f68f1b0e42394bdfb535fc059f555d9e3c0 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Fri, 5 Sep 2025 18:54:13 -0300
Subject: [PATCH 40/51] fix test for phone input

---
 .../packages/forms/tests/php/contact-form/Contact_Form_Test.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php b/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php
index 655cf58092908..95ccb5735c7fc 100644
--- a/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php
+++ b/projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php
@@ -1728,8 +1728,8 @@ public function assertValidPhoneField( $html, $attributes ) {
 		$this->assertEquals( $input->getAttribute( 'value' ), $attributes['default'], 'value and default doesn\'t match' );
 
 		$this->assertEquals(
+			'jetpack-field__input-element',
 			$visible_input->getAttribute( 'class' ),
-			"{$attributes['type']} {$attributes['class']} grunion-field",
 			'input class attribute doesn\'t match'
 		);
 	}

From 6507d50ef4dc532969fc1a707cdbdc46561a1f38 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 02:17:13 -0300
Subject: [PATCH 41/51] use provided styles for dropdown

---
 .../forms/src/contact-form/class-contact-form-field.php        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index b0d25b5136117..a4f7408ce6209 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1067,7 +1067,8 @@ class="jetpack-combobox-selected"
 								data-wp-text="context.selectedCountry.value"></span>
 						</button>
 						<div 
-							class="jetpack-combobox-dropdown"
+							class="jetpack-combobox-dropdown <?php echo esc_attr( $this->get_attribute( 'stylevariationclasses' ) ); ?>"
+							style="<?php echo ( ! empty( $this->field_styles ) && is_string( $this->field_styles ) ? esc_attr( $this->field_styles ) : '' ); ?>"
 							data-wp-bind--hidden="!context.comboboxOpen">
 							<input
 								class="jetpack-combobox-search" 

From c4afe56f738766e32174ab94357d54a8410e40cf Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 02:17:59 -0300
Subject: [PATCH 42/51] address bug with calculated probe styles: use browser
 default 1.2 instead of 'normal'

---
 .../packages/forms/src/blocks/contact-form/util/form-styles.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/blocks/contact-form/util/form-styles.js b/projects/packages/forms/src/blocks/contact-form/util/form-styles.js
index 385434db3f7d6..525f4bda54490 100644
--- a/projects/packages/forms/src/blocks/contact-form/util/form-styles.js
+++ b/projects/packages/forms/src/blocks/contact-form/util/form-styles.js
@@ -152,7 +152,7 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
 		'--jetpack--contact-form--input-height': inputHeight,
 		'--jetpack--contact-form--font-size': fontSize,
 		'--jetpack--contact-form--font-family': fontFamily,
-		'--jetpack--contact-form--line-height': lineHeight,
+		'--jetpack--contact-form--line-height': lineHeight === 'normal' ? '1.2em' : lineHeight,
 		'--jetpack--contact-form--button-primary--color': buttonPrimaryColor,
 		'--jetpack--contact-form--button-primary--background-color': buttonPrimaryBackgroundColor,
 		'--jetpack--contact-form--button-primary--border': buttonPrimaryBorder,

From 680112d40858e2b6210837448c73a9dca9f45da4 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 02:19:19 -0300
Subject: [PATCH 43/51] address width and positioning issues

---
 .../packages/forms/src/contact-form/css/combobox.scss | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index d76c113544bf9..31a7aeaed3179 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -1,6 +1,5 @@
 // Custom Combobox Styles for Country Selector
 .jetpack-custom-combobox {
-	position: relative;
 	letter-spacing: normal; // don't let input attributes rule over this
 	background-color: inherit;
 
@@ -61,9 +60,10 @@
 
 	.jetpack-combobox-dropdown {
 		position: absolute;
-		top: calc(var(--jetpack--contact-form--line-height, 100%) * 1.5);
-		left: 0;
-		right: 0;
+		left: -1px;
+		top: 100%;
+		width: -webkit-fill-available;
+		min-width: 60%;
 
 		background-color: inherit;
 		border: 1px solid #ddd;
@@ -72,9 +72,7 @@
 		max-height: calc(var(--jetpack--contact-form--line-height, 25px) * 8);
 		z-index: 1000;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-		width: max-content;
 		overflow: hidden;
-		max-width: 75vw;
 
 		&.jetpack-combobox-open {
 			display: block;
@@ -113,7 +111,6 @@
 			font-size: 14px;
 			transition: background-color 0.1s;
 			gap: 8px;
-			width: 100%;
 			background-color: transparent;
 			border: none;
 			line-height: inherit;

From b20b86a49d03f8188b20dc29f6ddadbc647e02f8 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 02:20:12 -0300
Subject: [PATCH 44/51] fix styles colliding with defaults, use presets for
 color highlight

---
 .../forms/src/contact-form/css/combobox.scss  | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 31a7aeaed3179..7e576cf599377 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -28,6 +28,7 @@
 		&:focus {
 			outline: 0;
 			text-decoration: none;
+			box-shadow: none;
 		}
 
 		&:hover {
@@ -35,17 +36,16 @@
 		}
 
 		.jetpack-combobox-trigger-arrow {
-			font-size: 10px;
 			transition: transform 0.2s;
 			position: relative;
-			width: 8px;
+			width: 9px;
 
 			&::after {
 				content: "";
 				position: absolute;
 				left: 1px;
-				top: 0;
-				transform: translateY(100%) rotate(45deg);
+				top: calc(50% - 5.5px);
+				transform: rotate(45deg);
 				width: 7px;
 				height: 7px;
 				border-right: 1.5px solid currentColor;
@@ -66,10 +66,12 @@
 		min-width: 60%;
 
 		background-color: inherit;
-		border: 1px solid #ddd;
-		border-top: none;
+		border-color: var(--jetpack--contact-form--border-color, currentColor);
+		border-width: var(--jetpack--contact-form--border-size, 1px);
 		border-radius: 0 0 4px 4px;
-		max-height: calc(var(--jetpack--contact-form--line-height, 25px) * 8);
+		// some line-heights are too small,
+		//use max() to ensure a minimum height of 8 * 25px
+		max-height: max(calc(var(--jetpack--contact-form--line-height, 25px) * 8), 200px);
 		z-index: 1000;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 		overflow: hidden;
@@ -90,11 +92,18 @@
 			color: inherit;
 			background-color: inherit;
 			z-index: 1;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
 
 			&:focus {
 				outline: none;
 				box-shadow: none;
 			}
+
+		}
+		// for styles on search input, themes keep finding ways of messing with this
+		input[type="text"].jetpack-combobox-search {
+			background-color: inherit !important;
 		}
 
 		.jetpack-combobox-options {
@@ -118,19 +127,17 @@
 
 			&:hover,
 			&.is-focused {
-				background-color: #f5f5f5;
+				background-color: var(--wp--preset--color--secondary, #f5f5f5);
+				color: var(--wp--preset--color--background, #000);
 			}
 
 			&.jetpack-combobox-option-selected {
-				background-color: #f5f5f5;
+				background-color: var(--wp--preset--color--secondary, #f5f5f5);
 				font-weight: 600;
+				color: var(--wp--preset--color--background, #000);
 
 				&:hover {
-					background-color: #f5f5f5;
-				}
-
-				&.is-focused {
-					background-color: #cce7ff;
+					background-color: var(--wp--preset--color--secondary, #f5f5f5);
 				}
 			}
 		}

From 869e9bded237a15faf943b869c512433acdc2473 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 02:20:56 -0300
Subject: [PATCH 45/51] use fallback color as it's more reliable than the
 detected background

---
 projects/packages/forms/src/contact-form/css/phone-field.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index b1394ef0a85fb..1cfcc900b1afa 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -8,7 +8,7 @@
 	.jetpack-field__input-phone-wrapper {
 		display: flex;
 		gap: 8px;
-		background-color: var(--jetpack--contact-form--input-background);
+		background-color: var(--jetpack--contact-form--input-background-fallback);
 		border-color: var(--jetpack--contact-form--border-color, currentColor);
 		border-width: var(--jetpack--contact-form--border-size);
 		border-style: var(--jetpack--contact-form--border-style);

From f50b77971b1561ff60c7ea5378e5bc09f741ee47 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 11:09:00 -0300
Subject: [PATCH 46/51] change down arrow, use svg instead of pseudo element

---
 .../contact-form/class-contact-form-field.php |  6 ++++-
 .../forms/src/contact-form/css/combobox.scss  | 25 ++++++++-----------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index a4f7408ce6209..bda299294de2e 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -1061,7 +1061,11 @@ class="jetpack-combobox-selected"
 								data-wp-text="context.selectedCountry.flag"></span>
 							<span 
 								class="jetpack-combobox-trigger-arrow"
-								data-wp-class--is-open="context.comboboxOpen">&nbsp;</span>
+								data-wp-class--is-open="context.comboboxOpen">
+								<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+								</svg>
+							</span>
 							<span 
 								class="jetpack-combobox-selected"
 								data-wp-text="context.selectedCountry.value"></span>
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 7e576cf599377..02b20d54b66e0 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -22,7 +22,7 @@
 		line-height: inherit;
 		padding-block: 0;
 		padding-inline: 0;
-		gap: 0.5em;
+		gap: 0.4em;
 		color: inherit;
 
 		&:focus {
@@ -37,19 +37,16 @@
 
 		.jetpack-combobox-trigger-arrow {
 			transition: transform 0.2s;
-			position: relative;
-			width: 9px;
-
-			&::after {
-				content: "";
-				position: absolute;
-				left: 1px;
-				top: calc(50% - 5.5px);
-				transform: rotate(45deg);
-				width: 7px;
-				height: 7px;
-				border-right: 1.5px solid currentColor;
-				border-bottom: 1.5px solid currentColor;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 0.6em;
+			margin-left: 4px;
+
+			svg {
+				width: 100%;
+				height: 100%;
+				color: inherit;
 			}
 
 			&.is-open {

From 0bb88217b8c00765b9adfeeef3518660998d478b Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 11:52:10 -0300
Subject: [PATCH 47/51] use detected radius style when possible

---
 projects/packages/forms/src/contact-form/css/combobox.scss    | 2 +-
 projects/packages/forms/src/contact-form/css/phone-field.scss | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 02b20d54b66e0..54397e9b7aa5c 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -65,7 +65,7 @@
 		background-color: inherit;
 		border-color: var(--jetpack--contact-form--border-color, currentColor);
 		border-width: var(--jetpack--contact-form--border-size, 1px);
-		border-radius: 0 0 4px 4px;
+		border-radius: var(--jetpack--contact-form--border-radius, 4px);
 		// some line-heights are too small,
 		//use max() to ensure a minimum height of 8 * 25px
 		max-height: max(calc(var(--jetpack--contact-form--line-height, 25px) * 8), 200px);
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 1cfcc900b1afa..023477a4f1849 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -22,7 +22,8 @@
 		&:has(.jetpack-field__input-element:focus) {
 			outline-width: 2px;
 			outline-style: solid;
-			// mimics default focus outline color, need to fix this
+			// mimics default focus outline color, this is something we cannot
+			// fully control as the probe would fail to capture :focus styles
 			outline-color: rgb(0, 95, 204);
 		}
 

From 7d370605b35cd13df8f4bc6942f0c7069050ffe3 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 16:01:47 -0300
Subject: [PATCH 48/51] fix animated and outlined styles on combobox

---
 .../src/contact-form/css/phone-field.scss     | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 023477a4f1849..97b204bb03ea1 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -93,21 +93,28 @@
 			}
 		}
 
-		.animated-label__label:has(~* .jetpack-field__input-element:focus),
-		.animated-label__label:has(~* .jetpack-field__input-element.has-value),
-		.animated-label__label:has(~* .jetpack-field__input-element.has-placeholder) {
-			transform: translateY(0);
-			top: calc(2px + var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size, 1px)));
-
-			.grunion-label-text {
-				font-size: 0.75em;
+		.animated-label__label {
+
+			&:has(~.jetpack-field__input-phone-wrapper.is-combobox-open),
+			&:has(~.jetpack-field__input-phone-wrapper:focus-within),
+			&:has(~* .jetpack-field__input-element:focus),
+			&:has(~* .jetpack-field__input-element.has-value),
+			&:has(~* .jetpack-field__input-element.has-placeholder) {
+				transform: translateY(0);
+				top: calc(2px + var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size, 1px)));
+
+				.grunion-label-text {
+					font-size: 0.75em;
+				}
 			}
 		}
+
 	}
 
 	.is-style-outlined & {
 
 		.jetpack-field__input-phone-wrapper {
+			z-index: unset;
 
 			&:has(.jetpack-field__input-element:focus) {
 				outline: unset;
@@ -128,13 +135,18 @@
 			}
 		}
 
-		.notched-label:has(~* .jetpack-field__input-element:focus) .notched-label__label,
-		.notched-label:has(~* .jetpack-field__input-element.has-value) .notched-label__label,
-		.notched-label:has(~* .jetpack-field__input-element.has-placeholder) .notched-label__label {
-			top: calc(var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1);
+		.notched-label {
 
-			.grunion-label-text {
-				font-size: 0.8em;
+			&:has(~.jetpack-field__input-phone-wrapper.is-combobox-open) .notched-label__label,
+			&:has(~.jetpack-field__input-phone-wrapper:focus-within) .notched-label__label,
+			&:has(~* .jetpack-field__input-element:focus) .notched-label__label,
+			&:has(~* .jetpack-field__input-element.has-value) .notched-label__label,
+			&:has(~* .jetpack-field__input-element.has-placeholder) .notched-label__label {
+				top: calc(var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1);
+
+				.grunion-label-text {
+					font-size: 0.8em;
+				}
 			}
 		}
 

From 2e8bd5c9430f24a8a9590409b680bb44872e2777 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 16:25:02 -0300
Subject: [PATCH 49/51] use safe background color to avoid falling into
 transparent

---
 projects/packages/forms/src/contact-form/css/combobox.scss    | 2 +-
 projects/packages/forms/src/contact-form/css/phone-field.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index 54397e9b7aa5c..f64caeff3fc38 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -62,7 +62,7 @@
 		width: -webkit-fill-available;
 		min-width: 60%;
 
-		background-color: inherit;
+		background-color: var(--jetpack--contact-form--input-background-fallback);
 		border-color: var(--jetpack--contact-form--border-color, currentColor);
 		border-width: var(--jetpack--contact-form--border-size, 1px);
 		border-radius: var(--jetpack--contact-form--border-radius, 4px);
diff --git a/projects/packages/forms/src/contact-form/css/phone-field.scss b/projects/packages/forms/src/contact-form/css/phone-field.scss
index 97b204bb03ea1..f832addfd463b 100644
--- a/projects/packages/forms/src/contact-form/css/phone-field.scss
+++ b/projects/packages/forms/src/contact-form/css/phone-field.scss
@@ -8,7 +8,7 @@
 	.jetpack-field__input-phone-wrapper {
 		display: flex;
 		gap: 8px;
-		background-color: var(--jetpack--contact-form--input-background-fallback);
+		background-color: var(--jetpack--contact-form--input-background);
 		border-color: var(--jetpack--contact-form--border-color, currentColor);
 		border-width: var(--jetpack--contact-form--border-size);
 		border-style: var(--jetpack--contact-form--border-style);

From e8cbfcdc3d127cdf03f60e4f5eaac40920b7088d Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 20:05:00 -0300
Subject: [PATCH 50/51] inherit styles from block props

---
 .../forms/src/blocks/input-phone/edit.js      |  1 +
 .../shared/components/searchable-combobox.js  | 21 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/projects/packages/forms/src/blocks/input-phone/edit.js b/projects/packages/forms/src/blocks/input-phone/edit.js
index d075f44bd00b0..85e9b5764af14 100644
--- a/projects/packages/forms/src/blocks/input-phone/edit.js
+++ b/projects/packages/forms/src/blocks/input-phone/edit.js
@@ -92,6 +92,7 @@ const PhoneInputEdit = ( { attributes, clientId, isSelected, name, setAttributes
 							isOpen={ comboboxOpen }
 							onOpenChange={ setComboboxOpen }
 							placeholer={ __( 'Search countries…', 'jetpack-forms' ) }
+							parentStyle={ blockProps?.style }
 						/>
 					</div>
 				) }
diff --git a/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
index ab3a6255418f6..951b3eb9e2db6 100644
--- a/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
+++ b/projects/packages/forms/src/blocks/shared/components/searchable-combobox.js
@@ -1,8 +1,21 @@
-import { KeyboardShortcuts } from '@wordpress/components';
+import { KeyboardShortcuts, SVG, Path } from '@wordpress/components';
 import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 
+const downArrowIcon = () => {
+	return (
+		<SVG width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<Path
+				d="M1 1L5 5L9 1"
+				stroke="currentColor"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</SVG>
+	);
+};
 /**
  * Combobox Component
  *
@@ -20,6 +33,7 @@ import clsx from 'clsx';
  * @param {string}   props.className          - Additional CSS class names
  * @param {boolean}  props.disabled           - Whether the combobox is disabled
  * @param {string}   props.placeholder        - The placeholder text for the search input
+ * @param {object}   props.parentStyle        - The parent style
  * @return {Element|null} The SearchableCombobox component or null if no options/selectedOption
  */
 const SearchableCombobox = ( {
@@ -31,6 +45,7 @@ const SearchableCombobox = ( {
 	className = '',
 	disabled = false,
 	placeholder = __( 'Search…', 'jetpack-forms' ),
+	parentStyle = {},
 } ) => {
 	const [ internalIsOpen, setInternalIsOpen ] = useState( false );
 	const [ filteredOptions, setFilteredOptions ] = useState( [] );
@@ -257,13 +272,13 @@ const SearchableCombobox = ( {
 				aria-haspopup="listbox"
 			>
 				<span className="jetpack-combobox-selected">{ selectedOption.flag }</span>
-				<span className={ triggerArrowClass }>&nbsp;</span>
+				<span className={ triggerArrowClass }>{ downArrowIcon() }</span>
 				<span className="jetpack-combobox-selected">{ selectedOption.value }</span>
 			</button>
 
 			{ isOpen && (
 				<KeyboardShortcuts bindGlobal={ true } shortcuts={ shortcuts }>
-					<div className="jetpack-combobox-dropdown jetpack-combobox-open">
+					<div className="jetpack-combobox-dropdown jetpack-combobox-open" style={ parentStyle }>
 						<input
 							ref={ searchInputRef }
 							className="jetpack-combobox-search"

From dab8d260cd346e076cd17eb1a04a6c81de1ca789 Mon Sep 17 00:00:00 2001
From: Christian Gastrell <cgastrell@gmail.com>
Date: Mon, 8 Sep 2025 20:05:42 -0300
Subject: [PATCH 51/51] fix some quirks on editor styles to match frontend

---
 .../packages/forms/src/blocks/input-phone/editor.scss     | 2 +-
 .../packages/forms/src/contact-form/css/combobox.scss     | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/projects/packages/forms/src/blocks/input-phone/editor.scss b/projects/packages/forms/src/blocks/input-phone/editor.scss
index c016ce9cad9b0..99d503e25ef84 100644
--- a/projects/packages/forms/src/blocks/input-phone/editor.scss
+++ b/projects/packages/forms/src/blocks/input-phone/editor.scss
@@ -4,7 +4,7 @@
 	.jetpack-field__input,
 	.jetpack-field__textarea {
 		box-sizing: border-box;
-		border-color: currentColor;
+		border-color: var(--jetpack--contact-form--border-color, currentColor);
 		border-radius: var(--jetpack--contact-form--border-radius);
 		border-width: var(--jetpack--contact-form--border-size);
 		font-size: var(--jetpack--contact-form--font-size);
diff --git a/projects/packages/forms/src/contact-form/css/combobox.scss b/projects/packages/forms/src/contact-form/css/combobox.scss
index f64caeff3fc38..12b88cd3fc775 100644
--- a/projects/packages/forms/src/contact-form/css/combobox.scss
+++ b/projects/packages/forms/src/contact-form/css/combobox.scss
@@ -157,3 +157,11 @@
 	pointer-events: none;
 	color: currentColor;
 }
+
+// Editor styles
+.wp-block .jetpack-custom-combobox {
+
+	.jetpack-combobox-option {
+		width: 100%;
+	}
+}