|
|
|
@ -5,6 +5,7 @@ import { viewPaddingsBridge } from "@/lib/view-paddings"; |
|
|
|
|
|
|
|
let activeSheetCount = 0; |
|
|
|
let hasFocusedKeyboardInput = false; |
|
|
|
let keyboardHeight = 0; |
|
|
|
let bodyHadDropdownClass = false; |
|
|
|
let initialBodyOverflow = ""; |
|
|
|
let initialHtmlOverflow = ""; |
|
|
|
@ -86,13 +87,36 @@ function isKeyboardInputTarget(target: EventTarget | null): boolean { |
|
|
|
} |
|
|
|
|
|
|
|
function syncQuestionInputOpenClass() { |
|
|
|
if (hasFocusedKeyboardInput) { |
|
|
|
if (hasFocusedKeyboardInput && keyboardHeight > 0) { |
|
|
|
document.body.classList.add("question-keyboard-open"); |
|
|
|
} else { |
|
|
|
document.body.classList.remove("question-keyboard-open"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function syncKeyboardShift(height: number) { |
|
|
|
const root = document.documentElement; |
|
|
|
if (height <= 0) { |
|
|
|
root.style.setProperty("--question-keyboard-shift", "0px"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const activeContent = document.querySelector<HTMLElement>( |
|
|
|
'.question-snap-item[aria-current="step"] .question-snap-content', |
|
|
|
); |
|
|
|
if (!activeContent) return; |
|
|
|
|
|
|
|
const visibleBottom = window.innerHeight - height; |
|
|
|
const requiredShift = Math.max( |
|
|
|
0, |
|
|
|
activeContent.getBoundingClientRect().bottom - visibleBottom + 16, |
|
|
|
); |
|
|
|
root.style.setProperty( |
|
|
|
"--question-keyboard-shift", |
|
|
|
`${Math.min(requiredShift, height)}px`, |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Moves the active question up (same animation the dropdown sheet uses) while |
|
|
|
* a keyboard input is focused, so the mobile keyboard cannot cover it. |
|
|
|
@ -113,13 +137,13 @@ export function useQuestionInputFocusSync() { |
|
|
|
}; |
|
|
|
|
|
|
|
const unsubscribeConfig = viewPaddingsBridge.subscribeConfig((config) => { |
|
|
|
if (config.keyboardHeight > 0) { |
|
|
|
hasFocusedKeyboardInput = isKeyboardInputTarget(document.activeElement); |
|
|
|
} else { |
|
|
|
keyboardHeight = config.keyboardHeight; |
|
|
|
if (keyboardHeight === 0) { |
|
|
|
// Android Back can hide Flutter's keyboard without dispatching blur.
|
|
|
|
hasFocusedKeyboardInput = false; |
|
|
|
} |
|
|
|
syncQuestionInputOpenClass(); |
|
|
|
window.requestAnimationFrame(() => syncKeyboardShift(keyboardHeight)); |
|
|
|
}); |
|
|
|
|
|
|
|
const initialViewportHeight = window.visualViewport?.height ?? 0; |
|
|
|
@ -146,6 +170,11 @@ export function useQuestionInputFocusSync() { |
|
|
|
); |
|
|
|
unsubscribeConfig(); |
|
|
|
hasFocusedKeyboardInput = false; |
|
|
|
keyboardHeight = 0; |
|
|
|
document.documentElement.style.setProperty( |
|
|
|
"--question-keyboard-shift", |
|
|
|
"0px", |
|
|
|
); |
|
|
|
document.body.classList.remove("question-keyboard-open"); |
|
|
|
}; |
|
|
|
}, []); |
|
|
|
|
