diff --git a/core/src/utils/input-shims/hacks/scroll-assist.ts b/core/src/utils/input-shims/hacks/scroll-assist.ts index e6a5a9457f..939987afb0 100644 --- a/core/src/utils/input-shims/hacks/scroll-assist.ts +++ b/core/src/utils/input-shims/hacks/scroll-assist.ts @@ -74,6 +74,7 @@ const jsSetFocus = async ( clearTimeout(scrollContentTimeout); } + window.removeEventListener('ionKeyboardDidShow', doubleKeyboardEventListener); window.removeEventListener('ionKeyboardDidShow', scrollContent); // scroll the input into place @@ -89,6 +90,11 @@ const jsSetFocus = async ( inputEl.focus(); }; + const doubleKeyboardEventListener = () => { + window.removeEventListener('ionKeyboardDidShow', doubleKeyboardEventListener); + window.addEventListener('ionKeyboardDidShow', scrollContent); + }; + if (contentEl) { const scrollEl = await contentEl.getScrollElement(); @@ -106,7 +112,20 @@ const jsSetFocus = async ( */ const totalScrollAmount = scrollEl.scrollHeight - scrollEl.clientHeight; if (scrollData.scrollAmount > (totalScrollAmount - scrollEl.scrollTop)) { - window.addEventListener('ionKeyboardDidShow', scrollContent); + + /** + * On iOS devices, the system will show a "Passwords" bar above the keyboard + * after the initial keyboard is shown. This prevents the webview from resizing + * until the "Passwords" bar is shown, so we need to wait for that to happen first. + */ + if (inputEl.type === 'password') { + + // Add 50px to account for the "Passwords" bar + scrollData.scrollAmount += 50; + window.addEventListener('ionKeyboardDidShow', doubleKeyboardEventListener); + } else { + window.addEventListener('ionKeyboardDidShow', scrollContent); + } /** * This should only fire in 2 instances: