Browse Source

fix: stabilize keyboard viewport lift during incremental animations by rounding values and adjusting height logic

master
mortezaei 4 days ago
parent
commit
2663ed078b
  1. 34
      src/components/Componentes/question-viewport-coordinator.ts

34
src/components/Componentes/question-viewport-coordinator.ts

@ -84,7 +84,7 @@ export function isActiveQuestionKeyboardInput(
function setLift(nextLift: number) {
const prevLift = currentLift;
currentLift = Math.max(0, nextLift);
currentLift = Math.max(0, Math.round(nextLift));
document.documentElement.style.setProperty(LIFT_VARIABLE, `${currentLift}px`);
const isOpen = currentLift > 0 && keyboardVisible && activeQuestionInput !== null;
document.body.classList.toggle("question-keyboard-open", isOpen);
@ -94,9 +94,9 @@ function setLift(nextLift: number) {
function getKeyboardTop() {
if (!keyboardVisible || !activeQuestionInput) return null;
// Expected full keyboard height for mobile devices is ~330px
// Expected full keyboard height for mobile devices is ~320px
const fullKeyboardHeight =
lastKeyboardHeight > 250 ? lastKeyboardHeight : 330;
lastKeyboardHeight > 250 ? lastKeyboardHeight : 320;
const targetHeight = Math.max(keyboardHeight, fullKeyboardHeight);
const flutterTop = window.innerHeight - targetHeight;
@ -177,15 +177,27 @@ export function updateQuestionKeyboardHeight(height: number) {
if (Math.abs(nextHeight - keyboardHeight) < 1) return;
console.log(`[Coord] updateHeight: ${keyboardHeight} -> ${nextHeight}`);
keyboardHeight = nextHeight;
keyboardVisible = keyboardHeight > KEYBOARD_THRESHOLD;
if (keyboardVisible) {
if (nextHeight > 0) {
keyboardVisible = true;
if (nextHeight > 250) {
lastKeyboardHeight = Math.max(lastKeyboardHeight, nextHeight);
keyboardHeight = nextHeight;
} else if (activeQuestionInput) {
// Keyboard is opening with incremental animation frames (e.g. Samsung 11.3px, 26.3px, 32px)
// Keep expected target height so lift doesn't bounce/collapse during animation frames.
const expectedHeight = lastKeyboardHeight > 250 ? lastKeyboardHeight : 320;
keyboardHeight = Math.max(nextHeight, expectedHeight);
} else {
keyboardHeight = nextHeight;
}
if (isActiveQuestionKeyboardInput(document.activeElement)) {
activeQuestionInput = document.activeElement;
}
} else {
// nextHeight === 0: keyboard was closed
keyboardHeight = 0;
keyboardVisible = false;
}
scheduleLiftUpdate();
}
@ -221,7 +233,7 @@ export function useQuestionViewportCoordinator() {
if (!isActiveQuestionKeyboardInput(event.target)) return;
activeQuestionInput = event.target;
const expectedHeight =
lastKeyboardHeight > 250 ? lastKeyboardHeight : 330;
lastKeyboardHeight > 250 ? lastKeyboardHeight : 320;
keyboardHeight = expectedHeight;
keyboardVisible = true;
console.log('[Coord] focusin on input:', (event.target as HTMLElement).tagName, 'targetKHeight:', expectedHeight);
@ -259,12 +271,12 @@ export function useQuestionViewportCoordinator() {
if (isActiveQuestionKeyboardInput(document.activeElement)) {
activeQuestionInput = document.activeElement;
keyboardVisible = true;
keyboardHeight = Math.max(keyboardHeight, reduction);
if (keyboardHeight > 250) {
lastKeyboardHeight = Math.max(lastKeyboardHeight, keyboardHeight);
if (reduction > 250) {
lastKeyboardHeight = Math.max(lastKeyboardHeight, reduction);
keyboardHeight = reduction;
}
}
} else if (reduction <= KEYBOARD_THRESHOLD && !keyboardVisible) {
} else if (reduction <= KEYBOARD_THRESHOLD && !keyboardVisible && !activeQuestionInput) {
closedViewportHeight = viewportHeight;
}
scheduleLiftUpdate();

Loading…
Cancel
Save