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.

Sign up for GitHub

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

Jump to bottom

bug: input blurring utility causes non input and textarea elements to be blurred #29072

Closed
3 tasks done
jkyoutsey opened this issue Feb 19, 2024 · 4 comments
Closed
3 tasks done

bug: input blurring utility causes non input and textarea elements to be blurred #29072

jkyoutsey opened this issue Feb 19, 2024 · 4 comments
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@jkyoutsey
Copy link

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

In an Ionic Angular application with video.js installed at latest (8.10.x) when running in either Chrome with DevTools in mobile device mode, or actually running on a device (simulator in xcode or deployed to a mobile device) the playback rates button will open and then immediately close the menu with the rate buttons in it. Sometimes a longer press will cause it to stay open, but a tap is always an immediate open/close. This ONLY happens in an Ionic app. Outside of Ionic the videojs menus work perfectly.

Expected Behavior

When clicking on a videojs control button Ionic doesn't interfere with videojs behavior.

Steps to Reproduce

  1. Follow the instructions in the readme on the linked repo

Code Reproduction URL

https://github.com/jkyoutsey/ionic-videojs-playback-rates-flicker-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.11.1
npm : 10.2.4
OS : macOS Unknown

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Feb 19, 2024
@liamdebeasi
Copy link
Contributor

liamdebeasi commented Feb 29, 2024 •
edited

Thanks, I can reproduce this. This blur call appears to be causing the behavior. My understanding of this utility is that it's only applicable to text inputs, so this line seems suspect because it implies that only inputs and textarea should be blurred. However, the way this code is written ensures that the opposite happens.

edit 1: It looks like this comment did match the code executed up until this commit. At the moment I'm still unclear if this change is correct or not. The original issue shows a searchbar in a segment which is not a pattern we support, so I need to dig into this a bit more.

@liamdebeasi liamdebeasi changed the title Angular Ionic with videojs playbackRates menu opens and immediately closes bug: input blurring utility causes non input and textarea elements to be blurred Feb 29, 2024
@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels Feb 29, 2024
@liamdebeasi liamdebeasi removed their assignment Feb 29, 2024
@ionitron-bot ionitron-bot bot removed the triage label Feb 29, 2024
@liamdebeasi
Copy link
Contributor

As a temporary workaround, you can set inputBlurring: false in provideIonicAngular.

@liamdebeasi liamdebeasi mentioned this issue Feb 29, 2024
Merged
2 tasks
liamdebeasi added a commit that referenced this issue Mar 1, 2024
@liamdebeasi @amandaejohnston
fix(input-shims): disable input blurring util by default (#29104)
bf1701e 
Issue number: resolves #29072

---------

<!-- 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. -->

The input blurring utility is causing adverse side effects in developer
applications by causing certain UI components to be blurred. This
utility was [added back in
2017](ionic-team/ionic-v3@c10f72b).

That commit claims to fix a number of issues, but
#8933 and
#11484 seem most
relevant here.

While the purpose of this utility is not definitively known it appears
that this was created to solve an issue on iOS where the searchbar was
not being blurred when tapping outside of the input. The linked issues
refer to cases where inputs are not blurred when they should be. This
aligns with the input blurring utility behavior where it only blurs
elements and never focuses them.

Additionally, the two linked issues only happened on iOS which aligns
with the default behavior of the input blurring utility which is to only
be enabled on iOS.

I tested the searchbar on iOS with this utility **disabled** and I was
able to blur the searchbar by tapping outside the input. It seems that
this utility was created to work around a WebKit issue that has since
been resolved.


https://github.com/ionic-team/ionic-framework/assets/2721089/7772688b-a0d4-476e-be72-931cc07cd93a

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Given that I am not 100% sure that this utility does what I think it
does, I'd like to propose we disable this feature by default starting in
Ionic 8. This will resolve the linked issue but also give developers an
escape hatch (by manually re-enabling it in their apps) if disabling the
utility does cause issues. The team can evaluate remove the code
altogether if disabling it does not have any known adverse side effects.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

I don't consider this a breaking change because a) `inputBlurring` is a
private API and b) there current thinking is that there should be no
behavior change (other than the buggy behaviors going away) since this
utility exists to solve a WebKit issue that no longer exists.

<!--
  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. -->

Dev build: `8.0.0-dev.11709245047.1565a499`

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
@liamdebeasi
Copy link
Contributor

Thanks for the issue. This has been resolved via #29104, and a fix will be available in an upcoming release of Ionic Framework. In Ionic 8 we will be disabling this utility by default which should resolve the issue reported here. In the meantime, you can use the workaround I mentioned above.

@ionitron-bot Ionitron Bot
Copy link

ionitron-bot bot commented Mar 31, 2024

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Mar 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@liamdebeasi @jkyoutsey @brandyscarney