Skip to content

Commit

Permalink
fix(input): slotted buttons are clickable (#28772)
Browse files Browse the repository at this point in the history
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
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?
<!-- 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`
  • Loading branch information
liamdebeasi authored Jan 3, 2024
1 parent fbada1d commit 4ccc150
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions core/src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down

0 comments on commit 4ccc150

Please sign in to comment.