fix(input-shims): disable input blurring util by default (#29104)

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](c10f72b1e2).

That commit claims to fix a number of issues, but
https://github.com/ionic-team/ionic-framework/issues/8933 and
https://github.com/ionic-team/ionic-framework/issues/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>
This commit is contained in:
Liam DeBeasi
2024-03-01 12:21:36 -05:00
committed by GitHub
parent ac7253108a
commit bf1701ed39

View File

@@ -33,7 +33,15 @@ export const startInputShims = async (config: Config, platform: 'ios' | 'android
const keyboardHeight = config.getNumber('keyboardHeight', 290);
const scrollAssist = config.getBoolean('scrollAssist', true);
const hideCaret = config.getBoolean('hideCaretOnScroll', isIOS);
const inputBlurring = config.getBoolean('inputBlurring', isIOS);
/**
* The team is evaluating if inputBlurring is still needed. As a result
* this feature is disabled by default as of Ionic 8.0. Developers are
* able to re-enable it temporarily. The team may remove this utility
* if it is determined that doing so would not bring any adverse side effects.
* TODO FW-6014 remove input blurring utility (including implementation)
*/
const inputBlurring = config.getBoolean('inputBlurring', false);
const scrollPadding = config.getBoolean('scrollPadding', true);
const inputs = Array.from(doc.querySelectorAll('ion-input, ion-textarea')) as HTMLElement[];