Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(input): slotted buttons are clickable #28772

Merged
merged 1 commit into from Jan 3, 2024
Merged

fix(input): slotted buttons are clickable #28772

merged 1 commit into from Jan 3, 2024

Conversation

liamdebeasi
Copy link
Member

@liamdebeasi liamdebeasi commented Jan 2, 2024

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
  • 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

@github-actions github-actions bot added the package: core @ionic/core package label Jan 2, 2024
@@ -259,15 +259,16 @@

// Input Has focus
// --------------------------------------------------
// When the input has focus, then the input cover should be hidden
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The associated code for this comment was removed in d817cc3#diff-25a4832c20c7342508f6e1921d7e0db8c6c7ef1b5053f643d665c8f45a84cd19R146.

@liamdebeasi liamdebeasi marked this pull request as ready for review January 2, 2024 21:06
@liamdebeasi liamdebeasi requested a review from a team as a code owner January 2, 2024 21:06
@liamdebeasi liamdebeasi requested review from thetaPC and removed request for a team January 2, 2024 21:06
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, works well

@liamdebeasi liamdebeasi added this pull request to the merge queue Jan 3, 2024
Merged via the queue into main with commit 4ccc150 Jan 3, 2024
56 checks passed
@liamdebeasi liamdebeasi deleted the FW-5848 branch January 3, 2024 21:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: click event not fired on slotted buttons inside an ion-input that has focus
2 participants