Forms: Fix combobox dropdown occlusion with z-index (#46401)

* combobox containers/wrappers need to raise z-index to avoid oclusion by other elements

* changelog

* reset animated label so it doesn't step on top of dropdowns

* Remove redundant tabindex

Co-authored-by: Copilot <[email protected]>

* typo

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/20470809130

Upstream-Ref: Automattic/jetpack@d9f4da0

Author: dhasilva

CHANGELOG.md

@@ -17,6 +17,7 @@ This is an alpha version! The changes listed here are not final.
 - Update radio button styling to use ::before pseudo-element approach for consistency with checkboxes
 
 ### Fixed
+- Fixed combobox dropdown occlusion by adding z-index when open
 - Forms: don't allow ::after pseudo element manipulation on Jetpack Forms radio and checkbox input elements
 - Forms: update 'Learn more' link in form notification settings.
 

dist/blocks/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('jetpack-connection', 'jetpack-script-data', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-jp-i18n-loader', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '6a0fa763dd521c230507');
+<?php return array('dependencies' => array('jetpack-connection', 'jetpack-script-data', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-jp-i18n-loader', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '78cad461d58cad35d98d');

dist/blocks/editor.css

@@ -166,6 +166,14 @@
 	color: currentColor;
 }
 
+// input wrappers with combobox open should raise to avoid occlusion
+.contact-form .wp-block-jetpack-input-wrap {
+
+	&:has(.is-combobox-open) {
+		z-index: 2;
+	}
+}
+
 // Editor styles
 .wp-block .jetpack-custom-combobox {
 

dist/blocks/editor.rtl.css

@@ -914,7 +914,7 @@ on production builds, the attributes are being reordered, causing side-effects
 	margin: 0;
 	transform: translateY(-50%);
 	transition: translatey 150ms cubic-bezier(0.4, 0, 0.2, 1);
-	z-index: 2;
+	z-index: 1;
 }
 
 .contact-form .is-style-animated .grunion-field-wrap .grunion-label-text {