fix(scroll-assist): re-run when keyboard changes (#28174)

Issue number: resolves #22940

---------

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

Scroll assist does not run when changing keyboards. This means that
inputs can be hidden under the keyboard if the new keyboard is larger
than the previous keyboard.

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

- On Browsers/PWAs scroll assist will re-run when the keyboard geometry
changes. We don't have a cross-browser way of detecting keyboard changes
yet, so this is the best we have for now.
- On Cordova/Capacitor scroll assist will re-run when the keyboard
changes, even if the overall keyboard geometry does not change.


In the example below, we are changing keyboards while an input is
focused:
| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/715e176a-6724-4308-ae3e-15b5bea308ac"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/b9ccd482-720a-409b-a089-b3330c1e405c"></video>
|

Breakdown per-resize mode:

| Native | None | Ionic | Body |
| - | - | - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/b930ac5f-3398-4887-a8ca-a57708adc66d"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/68465854-94d0-4e00-940c-c4674a43b6a3"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/561f313a-9caf-4c9e-ab15-9c4383f0e3ee"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/300b8894-ad2a-43bc-8e82-ecd68afd407e"></video>
|

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## 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: `7.3.4-dev.11694706860.14b2710d`

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
2023-09-19 15:02:20 -04:00
committed by GitHub
parent 5ff32b7786
commit 3f06da4cfc
2 changed files with 107 additions and 3 deletions

View File

@ -20,6 +20,26 @@
* Note: Code inside of this if-block will
* not run in an SSR environment.
*/
export const win: Window | undefined = typeof window !== 'undefined' ? window : undefined;
/**
* Event listeners on the window typically expect
* Event types for the listener parameter. If you want to listen
* on the window for certain CustomEvent types you can add that definition
* here as long as you are using the "win" utility below.
*/
type IonicWindow = Window & {
addEventListener(
type: 'ionKeyboardDidShow',
listener: (ev: CustomEvent<{ keyboardHeight: number }>) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener(
type: 'ionKeyboardDidShow',
listener: (ev: CustomEvent<{ keyboardHeight: number }>) => void,
options?: boolean | AddEventListenerOptions
): void;
};
export const win: IonicWindow | undefined = typeof window !== 'undefined' ? window : undefined;
export const doc: Document | undefined = typeof document !== 'undefined' ? document : undefined;