Fix Forms combobox dropdown styling overrides for phone input field (#46408)

* remove backdrop filter for phone input element on editor, it's handled by its wrapper

* use same z-index strategy for combobox dropdown on editor as in frontend

* use better fitting strategy for combobox dropdown

* Add changelog for forms combobox styling fixes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* use right variable for setting border size

* Add default value for CSS var

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* reorder internal z layers for combobox

* fix outlined styled label not getting border when combobox is open

* fix prefix button background and states

* move z-index rule to phone block container

* re-set steps wrapper and progress z-index to play nice with combobox overlay

* make Douglas happy

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

projects/packages/forms/changelog/fix-forms-combobox-styling-overrides

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix combobox dropdown styling overrides for phone input field

projects/packages/forms/src/blocks/form-progress-indicator/style.scss

@@ -10,6 +10,7 @@
 	position: relative;
 	overflow: visible;
 	box-sizing: border-box;
+	z-index: 1;
 
 	.jetpack-form-progress-indicator-steps {
 		display: flex;

projects/packages/forms/src/blocks/input-phone/editor.scss

@@ -1,6 +1,13 @@
 .jetpack-contact-form .jetpack-field.jetpack-field-phone,
 .jetpack-contact-form .jetpack-field.jetpack-field-telephone {
 
+	&:has(.jetpack-combobox-open) {
+		// GB re-sets z-index every time the block is moved
+		// so we need to force it to 3 to stay on top of other
+		// blocks so the dropdown overlay stays on top of them.
+		z-index: 3 !important;
+	}
+
 	.jetpack-field__input,
 	.jetpack-field__textarea {
 		box-sizing: border-box;
@@ -97,6 +104,10 @@
 				}
 			}
 		}
+
+		.jetpack-field__input-element {
+			backdrop-filter: none;
+		}
 	}
 }
 

projects/packages/forms/src/contact-form/css/combobox.scss

@@ -10,8 +10,11 @@
 	}
 
 	// special override for aggressive themes (2021) that set background-color
-	.has-background & button.jetpack-combobox-trigger:not(:active):not(:hover):not(.has-background) {
+	button.jetpack-combobox-trigger:not(:active):not(:hover),
+	button.jetpack-combobox-trigger:not(:active):hover,
+	button.jetpack-combobox-trigger:focus {
 		background-color: transparent;
+		color: inherit;
 	}
 
 	.jetpack-combobox-trigger {
@@ -65,7 +68,8 @@
 
 	.jetpack-combobox-dropdown {
 		position: absolute;
-		left: -1px;
+		left: calc(var(--jetpack--contact-form--border-left-size, 1px) * -1);
+		right: calc(var(--jetpack--contact-form--border-left-size, 1px) * -1);
 		top: 100%;
 		width: -webkit-fill-available;
 		min-width: 60%;
@@ -88,7 +92,14 @@
 		.jetpack-combobox-search {
 			width: 100%;
 			padding: 8px 12px;
-			border: none;
+
+			// Using !important to keep tight control over the
+			// search input looks.
+			border-top: none !important;
+			border-left: none !important;
+			border-right: none !important;
+			border-bottom-left-radius: 0 !important;
+			border-bottom-right-radius: 0 !important;
 			border-bottom: 1px solid #eee;
 			outline: none;
 			font-size: 14px;
@@ -97,8 +108,6 @@
 			color: inherit;
 			background-color: inherit;
 			z-index: 1;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
 
 			&:focus {
 				outline: none;

projects/packages/forms/src/contact-form/css/grunion.scss

@@ -34,6 +34,10 @@
 	opacity: 0.3;
 }
 
+.jetpack-form-steps-wrapper {
+	z-index: 2;
+}
+
 .jetpack-form-step {
 	display: none;
 }

projects/packages/forms/src/contact-form/css/phone-field.scss

@@ -30,7 +30,8 @@
 		}
 
 		.jetpack-field__input-prefix:not([hidden]) {
-			background-color: inherit;
+			background-color: transparent;
+			z-index: 1;
 
 			.jetpack-field__input-element {
 				width: 100%;
@@ -44,7 +45,6 @@
 			}
 		}
 
-
 		.jetpack-field__input-element {
 			border: 0;
 			font: inherit;
@@ -59,6 +59,7 @@
 			min-width: unset;
 			min-height: unset;
 			backdrop-filter: none;
+			z-index: 1;
 
 			&:not(.jetpack-field__input-prefix .jetpack-field__input-element) {
 				letter-spacing: inherit;
@@ -156,12 +157,15 @@
 					font-size: 0.8em;
 				}
 			}
-		}
 
-		.notched-label:has(~* .jetpack-field__input-element:focus) .notched-label__notch,
-		.notched-label:has(~* .jetpack-field__input-element.has-value) .notched-label__notch,
-		.notched-label:has(~* .jetpack-field__input-element.has-placeholder) .notched-label__notch {
-			border-top-color: transparent !important;
+			&:has(~.jetpack-field__input-phone-wrapper.is-combobox-open) .notched-label__notch,
+			&:has(~.jetpack-field__input-phone-wrapper:focus-within) .notched-label__notch,
+			&:has(~* .jetpack-field__input-element:focus) .notched-label__notch,
+			&:has(~* .jetpack-field__input-element.has-value) .notched-label__notch,
+			&:has(~* .jetpack-field__input-element.has-placeholder) .notched-label__notch {
+				border-top-color: transparent !important;
+			}
 		}
+
 	}
 }