javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(): properly scroll to input with scroll assist (#20742)

Browse Source 
fixes #19589
This commit is contained in:
Liam DeBeasi
2020-03-16 15:38:11 -04:00
committed by Liam DeBeasi
parent 0514b421ec
commit e24060ecd9
2 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
core/src/utils/input-shims/hacks/scroll-assist.ts
View File

@ -61,15 +61,32 @@ const jsSetFocus = (
relocateInput(componentEl, inputEl, true, scrollData.inputSafeY); relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);
inputEl.focus(); inputEl.focus();
// scroll the input into place /* tslint:disable-next-line */
contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration).then(() => { if (typeof window !== 'undefined') {
// the scroll view is in the correct position now let scrollContentTimeout: any;
// give the native text input focus const scrollContent = async () => {
relocateInput(componentEl, inputEl, false, scrollData.inputSafeY); // clean up listeners and timeouts
if (scrollContentTimeout !== undefined) {
clearTimeout(scrollContentTimeout);
}
window.removeEventListener('resize', scrollContent);
// ensure this is the focused input // scroll the input into place
inputEl.focus(); await contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration);
});
// the scroll view is in the correct position now
// give the native text input focus
relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);
// ensure this is the focused input
inputEl.focus();
};
window.addEventListener('resize', scrollContent);
// fallback in case resize never fires
scrollContentTimeout = setTimeout(scrollContent, 1000);
}
}; };
const hasPointerMoved = (threshold: number, startCoord: PointerCoordinates | undefined, endCoord: PointerCoordinates | undefined) => { const hasPointerMoved = (threshold: number, startCoord: PointerCoordinates | undefined, endCoord: PointerCoordinates | undefined) => {

8
core/src/utils/input-shims/input-shims.ts
View File

@ -23,8 +23,12 @@ export const startInputShims = (config: Config) => {
const hideCaretMap = new WeakMap<HTMLElement, () => void>(); const hideCaretMap = new WeakMap<HTMLElement, () => void>();
const scrollAssistMap = new WeakMap<HTMLElement, () => void>(); const scrollAssistMap = new WeakMap<HTMLElement, () => void>();
const registerInput = (componentEl: HTMLElement) => { const registerInput = async (componentEl: HTMLElement) => {
const inputEl = (componentEl.shadowRoot || componentEl).querySelector('input') || (componentEl.shadowRoot || componentEl).querySelector('textarea'); if ((componentEl as any).componentOnReady) {
await (componentEl as any).componentOnReady();
}
const inputRoot = componentEl.shadowRoot || componentEl;
const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea');
const scrollEl = componentEl.closest('ion-content'); const scrollEl = componentEl.closest('ion-content');
if (!inputEl) { if (!inputEl) {