fix(material/form-field): ensure prefix and suffix are on top of other content

crisbeto · crisbeto · commit f6924af753f7 · 2023-05-07T15:26:53.000+02:00
Fixes that the prefix and suffix sometimes might not be clickable because they're underneath the label. Fixes #27043.
diff --git a/integration/mdc-migration/golden/yarn.lock b/integration/mdc-migration/golden/yarn.lock
@@ -3588,9 +3588,9 @@ camelcase@^5.3.1:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 caniuse-lite@^1.0.30001271, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001480"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
-  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
+  version "1.0.30001486"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz"
+  integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==
 
 chalk@^2.0.0:
   version "2.4.2"
diff --git a/integration/mdc-migration/sample-project/yarn.lock b/integration/mdc-migration/sample-project/yarn.lock
@@ -3588,9 +3588,9 @@ camelcase@^5.3.1:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 caniuse-lite@^1.0.30001271, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001480"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
-  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
+  version "1.0.30001486"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz"
+  integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==
 
 chalk@^2.0.0:
   version "2.4.2"
diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss
@@ -81,6 +81,9 @@
   // MDC applies `pointer-events: none` to the `.mdc-text-field--disabled`. This breaks clicking on
   // prefix and suffix buttons, so we override `pointer-events` to always allow clicking.
   pointer-events: auto;
+  // Needs a z-index to ensure it's on top of other content clickable. See #27043.
+  position: relative;
+  z-index: 1;
 }
 
 // The prefix/suffix needs a little extra padding between the icon and the infix. Because we need to

Original file line number	Diff line number	Diff line change
`@@ -81,6 +81,9 @@`
`81`	`81`	// MDC applies `pointer-events: none` to the `.mdc-text-field--disabled`. This breaks clicking on
`82`	`82`	// prefix and suffix buttons, so we override `pointer-events` to always allow clicking.
`83`	`83`	`pointer-events: auto;`
	`84`	`+ // Needs a z-index to ensure it's on top of other content clickable. See #27043.`
	`85`	`+ position: relative;`
	`86`	`+ z-index: 1;`
`84`	`87`	`}`
`85`	`88`
`86`	`89`	`// The prefix/suffix needs a little extra padding between the icon and the infix. Because we need to`