javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(footer, tab-bar): do not hide when webview resizing disabled

Browse Source
This commit is contained in:
Liam DeBeasi
2023-10-09 09:59:48 -04:00
parent 3259da0de1
commit b8ee3efb76
3 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
core/src/components/footer/footer.tsx
View File

@@ -3,6 +3,7 @@ import { Component, Element, Host, Prop, State, h } from '@stencil/core';
import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
import { getIonMode } from '../../global/ionic-global';
@@ -52,18 +53,28 @@ export class Footer implements ComponentInterface {
}
async connectedCallback() {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the footer
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
const resizeMode = await Keyboard.getResizeMode();
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
/**
* If the resize mode is set to None then we don't want to
* hide the tab bar here since it will never sit on top
* of the keyboard. Hiding the tab bar will cause a layout shift
* in apps that have resize set to None.
*/
if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the footer
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
}
}
disconnectedCallback() {

33
core/src/components/tab-bar/tab-bar.tsx
View File

@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
import { createColorClasses } from '@utils/theme';
import { getIonMode } from '../../global/ionic-global';
@@ -70,18 +71,28 @@ export class TabBar implements ComponentInterface {
}
async connectedCallback() {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the tab bar
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
const resizeMode = await Keyboard.getResizeMode();
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
/**
* If the resize mode is set to None then we don't want to
* hide the tab bar here since it will never sit on top
* of the keyboard. Hiding the tab bar will cause a layout shift
* in apps that have resize set to None.
*/
if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the tab bar
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
}
}
disconnectedCallback() {

3
core/src/utils/keyboard/keyboard-controller.ts
View File

@@ -1,6 +1,5 @@
import { doc, win } from '@utils/browser';
import { Keyboard, KeyboardResize } from '../native/keyboard';
import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
/**
* The element that resizes when the keyboard opens