fix(chat): reset input lift after keyboard closes
This commit is contained in:
@@ -24,6 +24,14 @@ const FALLBACK_KEYBOARD_MIN = 260;
|
|||||||
const FALLBACK_KEYBOARD_MAX = 380;
|
const FALLBACK_KEYBOARD_MAX = 380;
|
||||||
const FALLBACK_CLOSE_GRACE_MS = 900;
|
const FALLBACK_CLOSE_GRACE_MS = 900;
|
||||||
const RECHECK_DELAYS_MS = [0, 50, 120, 240, 420, 700];
|
const RECHECK_DELAYS_MS = [0, 50, 120, 240, 420, 700];
|
||||||
|
const FALLBACK_RELEASE_EVENT_TYPES = new Set([
|
||||||
|
"resize",
|
||||||
|
"scroll",
|
||||||
|
"geometrychange",
|
||||||
|
"focusout",
|
||||||
|
"blur",
|
||||||
|
"visibilitychange",
|
||||||
|
]);
|
||||||
const RECHECK_EVENT = "cozsweet:keyboard-recheck";
|
const RECHECK_EVENT = "cozsweet:keyboard-recheck";
|
||||||
|
|
||||||
const log = new Logger("HooksUseKeyboardHeight");
|
const log = new Logger("HooksUseKeyboardHeight");
|
||||||
@@ -57,6 +65,7 @@ export function useKeyboardHeight({
|
|||||||
let lastViewportHeight = -1;
|
let lastViewportHeight = -1;
|
||||||
let lastInputLift = -1;
|
let lastInputLift = -1;
|
||||||
let lastMayBeKeyboardClose = false;
|
let lastMayBeKeyboardClose = false;
|
||||||
|
let fallbackWasApplied = false;
|
||||||
const environment = getKeyboardAdaptEnvironment();
|
const environment = getKeyboardAdaptEnvironment();
|
||||||
|
|
||||||
log.debug("[keyboard] environment", environment);
|
log.debug("[keyboard] environment", environment);
|
||||||
@@ -81,6 +90,7 @@ export function useKeyboardHeight({
|
|||||||
shouldReleaseFallback(metrics, focusedAtRef.current)
|
shouldReleaseFallback(metrics, focusedAtRef.current)
|
||||||
) {
|
) {
|
||||||
fallbackAllowedRef.current = false;
|
fallbackAllowedRef.current = false;
|
||||||
|
blurKeyboardTarget(targetRef?.current);
|
||||||
log.debug("[keyboard] fallback released", {
|
log.debug("[keyboard] fallback released", {
|
||||||
reason: "keyboard-close-detected",
|
reason: "keyboard-close-detected",
|
||||||
environment,
|
environment,
|
||||||
@@ -102,6 +112,8 @@ export function useKeyboardHeight({
|
|||||||
)
|
)
|
||||||
: 0,
|
: 0,
|
||||||
);
|
);
|
||||||
|
fallbackWasApplied =
|
||||||
|
fallbackLift > 0 && inputLift >= fallbackLift && fallbackAllowedRef.current;
|
||||||
|
|
||||||
if (keyboardHeight !== lastKeyboardHeight) {
|
if (keyboardHeight !== lastKeyboardHeight) {
|
||||||
lastKeyboardHeight = keyboardHeight;
|
lastKeyboardHeight = keyboardHeight;
|
||||||
@@ -144,7 +156,7 @@ export function useKeyboardHeight({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const scheduleRechecks = (event?: Event) => {
|
const scheduleRechecks = (event?: Event) => {
|
||||||
if (event && isPossibleKeyboardCloseEvent(event)) {
|
if (event && isPossibleKeyboardCloseEvent(event, fallbackWasApplied)) {
|
||||||
lastMayBeKeyboardClose = true;
|
lastMayBeKeyboardClose = true;
|
||||||
}
|
}
|
||||||
timeoutIds.forEach((id) => window.clearTimeout(id));
|
timeoutIds.forEach((id) => window.clearTimeout(id));
|
||||||
@@ -164,6 +176,8 @@ export function useKeyboardHeight({
|
|||||||
window.addEventListener("orientationchange", scheduleRechecks);
|
window.addEventListener("orientationchange", scheduleRechecks);
|
||||||
window.addEventListener("focusin", scheduleRechecks);
|
window.addEventListener("focusin", scheduleRechecks);
|
||||||
window.addEventListener("focusout", scheduleRechecks);
|
window.addEventListener("focusout", scheduleRechecks);
|
||||||
|
window.addEventListener("blur", scheduleRechecks);
|
||||||
|
document.addEventListener("visibilitychange", scheduleRechecks);
|
||||||
window.addEventListener(RECHECK_EVENT, scheduleRechecks);
|
window.addEventListener(RECHECK_EVENT, scheduleRechecks);
|
||||||
|
|
||||||
scheduleRechecks();
|
scheduleRechecks();
|
||||||
@@ -180,6 +194,8 @@ export function useKeyboardHeight({
|
|||||||
window.removeEventListener("orientationchange", scheduleRechecks);
|
window.removeEventListener("orientationchange", scheduleRechecks);
|
||||||
window.removeEventListener("focusin", scheduleRechecks);
|
window.removeEventListener("focusin", scheduleRechecks);
|
||||||
window.removeEventListener("focusout", scheduleRechecks);
|
window.removeEventListener("focusout", scheduleRechecks);
|
||||||
|
window.removeEventListener("blur", scheduleRechecks);
|
||||||
|
document.removeEventListener("visibilitychange", scheduleRechecks);
|
||||||
window.removeEventListener(RECHECK_EVENT, scheduleRechecks);
|
window.removeEventListener(RECHECK_EVENT, scheduleRechecks);
|
||||||
resetVars();
|
resetVars();
|
||||||
};
|
};
|
||||||
@@ -270,8 +286,14 @@ function hasDetectedKeyboard(metrics: ViewportMetrics): boolean {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function isPossibleKeyboardCloseEvent(event: Event): boolean {
|
function isPossibleKeyboardCloseEvent(
|
||||||
|
event: Event,
|
||||||
|
fallbackWasApplied: boolean,
|
||||||
|
): boolean {
|
||||||
|
if (!fallbackWasApplied) {
|
||||||
return event.type === "resize" || event.type === "geometrychange";
|
return event.type === "resize" || event.type === "geometrychange";
|
||||||
|
}
|
||||||
|
return FALLBACK_RELEASE_EVENT_TYPES.has(event.type);
|
||||||
}
|
}
|
||||||
|
|
||||||
function isKeyboardTargetActive(
|
function isKeyboardTargetActive(
|
||||||
@@ -281,6 +303,11 @@ function isKeyboardTargetActive(
|
|||||||
return reactActive || (target != null && document.activeElement === target);
|
return reactActive || (target != null && document.activeElement === target);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function blurKeyboardTarget(target: HTMLElement | null | undefined): void {
|
||||||
|
if (!target || document.activeElement !== target) return;
|
||||||
|
target.blur();
|
||||||
|
}
|
||||||
|
|
||||||
function shouldUseInAppKeyboardFallback(): boolean {
|
function shouldUseInAppKeyboardFallback(): boolean {
|
||||||
if (typeof navigator === "undefined") return false;
|
if (typeof navigator === "undefined") return false;
|
||||||
const ua = navigator.userAgent;
|
const ua = navigator.userAgent;
|
||||||
|
|||||||
Reference in New Issue
Block a user