From 4ccc150edff4e3f33f453343aedb081d920b2f90 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 3 Jan 2024 16:16:26 -0500
Subject: [PATCH] fix(input): slotted buttons are clickable (#28772)

Issue number: resolves #28762

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Focused inputs have `pointer-events: none`. This code was added in
https://github.com/ionic-team/ionic-framework/commit/e27452b789232c0a3222a03e75de1a9af19d3411
to address https://github.com/ionic-team/ionic-framework/issues/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?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

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

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

**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`
---
 core/src/components/input/input.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index a62b308c4a4..e2504b032a5 100644
--- 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;
 }