fix(chat): adjust bottom inset values and fallback delay for keyboard avoidance
This commit is contained in:
@@ -46,7 +46,7 @@ describe("resolveChatKeyboardInset", () => {
|
|||||||
),
|
),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
keyboardVisible: true,
|
keyboardVisible: true,
|
||||||
bottomInset: 308,
|
bottomInset: 316,
|
||||||
source: "visual-viewport",
|
source: "visual-viewport",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -62,7 +62,7 @@ describe("resolveChatKeyboardInset", () => {
|
|||||||
),
|
),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
keyboardVisible: true,
|
keyboardVisible: true,
|
||||||
bottomInset: 328,
|
bottomInset: 336,
|
||||||
source: "virtual-keyboard",
|
source: "virtual-keyboard",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -83,8 +83,8 @@ describe("resolveChatKeyboardInset", () => {
|
|||||||
|
|
||||||
describe("resolveChatKeyboardFallbackInset", () => {
|
describe("resolveChatKeyboardFallbackInset", () => {
|
||||||
it("scales with viewport height and remains bounded", () => {
|
it("scales with viewport height and remains bounded", () => {
|
||||||
expect(resolveChatKeyboardFallbackInset(500)).toBe(268);
|
expect(resolveChatKeyboardFallbackInset(500)).toBe(276);
|
||||||
expect(resolveChatKeyboardFallbackInset(800)).toBe(344);
|
expect(resolveChatKeyboardFallbackInset(800)).toBe(352);
|
||||||
expect(resolveChatKeyboardFallbackInset(1_200)).toBe(388);
|
expect(resolveChatKeyboardFallbackInset(1_200)).toBe(396);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ describe("useChatKeyboardAvoidance", () => {
|
|||||||
expect(getBottomInset(container)).toBe("");
|
expect(getBottomInset(container)).toBe("");
|
||||||
|
|
||||||
act(() => vi.advanceTimersByTime(1));
|
act(() => vi.advanceTimersByTime(1));
|
||||||
expect(getBottomInset(container)).toBe("344px");
|
expect(getBottomInset(container)).toBe("352px");
|
||||||
expect(intervalSpy).not.toHaveBeenCalled();
|
expect(intervalSpy).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -141,7 +141,7 @@ describe("useChatKeyboardAvoidance", () => {
|
|||||||
visualViewport.dispatchEvent(new Event("resize"));
|
visualViewport.dispatchEvent(new Event("resize"));
|
||||||
vi.advanceTimersByTime(0);
|
vi.advanceTimersByTime(0);
|
||||||
});
|
});
|
||||||
expect(getBottomInset(container)).toBe("308px");
|
expect(getBottomInset(container)).toBe("316px");
|
||||||
|
|
||||||
visualViewport.height = 760;
|
visualViewport.height = 760;
|
||||||
act(() => {
|
act(() => {
|
||||||
@@ -161,7 +161,7 @@ describe("useChatKeyboardAvoidance", () => {
|
|||||||
vi.advanceTimersByTime(0);
|
vi.advanceTimersByTime(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(getBottomInset(container)).toBe("328px");
|
expect(getBottomInset(container)).toBe("336px");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("does not add fallback when the layout viewport resized", () => {
|
it("does not add fallback when the layout viewport resized", () => {
|
||||||
@@ -182,7 +182,7 @@ describe("useChatKeyboardAvoidance", () => {
|
|||||||
renderHarness(root, false);
|
renderHarness(root, false);
|
||||||
renderHarness(root, true);
|
renderHarness(root, true);
|
||||||
act(() => vi.advanceTimersByTime(250));
|
act(() => vi.advanceTimersByTime(250));
|
||||||
expect(getBottomInset(container)).toBe("344px");
|
expect(getBottomInset(container)).toBe("352px");
|
||||||
|
|
||||||
visualViewport.height = 460;
|
visualViewport.height = 460;
|
||||||
act(() => {
|
act(() => {
|
||||||
@@ -190,14 +190,14 @@ describe("useChatKeyboardAvoidance", () => {
|
|||||||
vi.advanceTimersByTime(0);
|
vi.advanceTimersByTime(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(getBottomInset(container)).toBe("308px");
|
expect(getBottomInset(container)).toBe("316px");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("removes the local inset when focus leaves", () => {
|
it("removes the local inset when focus leaves", () => {
|
||||||
renderHarness(root, false);
|
renderHarness(root, false);
|
||||||
renderHarness(root, true);
|
renderHarness(root, true);
|
||||||
act(() => vi.advanceTimersByTime(250));
|
act(() => vi.advanceTimersByTime(250));
|
||||||
expect(getBottomInset(container)).toBe("344px");
|
expect(getBottomInset(container)).toBe("352px");
|
||||||
|
|
||||||
renderHarness(root, false);
|
renderHarness(root, false);
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
export const CHAT_KEYBOARD_VISIBLE_THRESHOLD_PX = 80;
|
export const CHAT_KEYBOARD_VISIBLE_THRESHOLD_PX = 80;
|
||||||
export const CHAT_KEYBOARD_ZOOM_THRESHOLD = 1.05;
|
export const CHAT_KEYBOARD_ZOOM_THRESHOLD = 1.05;
|
||||||
export const CHAT_KEYBOARD_TARGET_GAP_PX = 8;
|
export const CHAT_KEYBOARD_TARGET_GAP_PX = 20;
|
||||||
export const CHAT_KEYBOARD_FALLBACK_RATIO = 0.42;
|
export const CHAT_KEYBOARD_FALLBACK_RATIO = 0.42;
|
||||||
export const CHAT_KEYBOARD_FALLBACK_MIN_PX = 260;
|
export const CHAT_KEYBOARD_FALLBACK_MIN_PX = 260;
|
||||||
export const CHAT_KEYBOARD_FALLBACK_MAX_PX = 380;
|
export const CHAT_KEYBOARD_FALLBACK_MAX_PX = 380;
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ import {
|
|||||||
} from "./chat-keyboard-geometry";
|
} from "./chat-keyboard-geometry";
|
||||||
|
|
||||||
const CHAT_KEYBOARD_BOTTOM_INSET_VAR = "--chat-keyboard-bottom-inset";
|
const CHAT_KEYBOARD_BOTTOM_INSET_VAR = "--chat-keyboard-bottom-inset";
|
||||||
const CHAT_KEYBOARD_FALLBACK_DELAY_MS = 250;
|
const CHAT_KEYBOARD_FALLBACK_DELAY_MS = 150;
|
||||||
|
|
||||||
const log = new Logger("UseChatKeyboardAvoidance");
|
const log = new Logger("UseChatKeyboardAvoidance");
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user