From f6924af753f77ce483e53d08b04b3be41dc2654f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 7 May 2023 15:26:53 +0200 Subject: [PATCH] fix(material/form-field): ensure prefix and suffix are on top of other content Fixes that the prefix and suffix sometimes might not be clickable because they're underneath the label. Fixes #27043. --- integration/mdc-migration/golden/yarn.lock | 6 +++--- integration/mdc-migration/sample-project/yarn.lock | 6 +++--- src/material/form-field/form-field.scss | 3 +++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/integration/mdc-migration/golden/yarn.lock b/integration/mdc-migration/golden/yarn.lock index 0296e586cc03..5cb258ef3d1a 100644 --- 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 index 0296e586cc03..5cb258ef3d1a 100644 --- 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 index a8310dddce89..2883c8262229 100644 --- 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