fix(input): slotted buttons are clickable (#28772)

liamdebeasi · web-flow · commit 4ccc150edff4 · 2024-01-03T21:16:26.000Z
Issue number: resolves #28762 ---------   ## What is the current behavior?  Focused inputs have `pointer-events: none`. This code was added in e27452b to address #5536. However, this causes slotted buttons to not be clickable when the input is focused because pointer events have been removed. This also causes the input to blur whenever you tap the label text. This behavior only exists on `ion-input`. Textarea is not affected. ## What is the new behavior?  This code was added several years ago for the (now) legacy syntax. I don't have full confidence that this won't break the legacy input because there's not a lot of context around why specifically this code was added. As a result, I scoped these styles only to the legacy input. - Slotted buttons can now be clicked when the input is focused. - Tapping the label when an input is focused keeps the input focused. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information  **Testing:** 1. I manually verified that scroll assist still works with the modern input. 2. I manually verified that the input remains focused after tapping the label. Dev build: `7.6.3-dev.11704229014.12cdc767`
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
@@ -259,15 +259,16 @@
 
 // Input Has focus
 // --------------------------------------------------
-// When the input has focus, then the input cover should be hidden
 
-:host(.has-focus) {
+// TODO FW-2764 Remove this
+:host(.has-focus.legacy-input) {
   pointer-events: none;
 }
 
-:host(.has-focus) input,
-:host(.has-focus) a,
-:host(.has-focus) button {
+// TODO FW-2764 Remove this
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
   pointer-events: auto;
 }
 
