FN-6153: fix mobile quick-entry toggle touch handling
Prevent mobile quick-entry action taps from being swallowed by browser touch gestures. - apply a mobile touch-action override to quick-entry action containers and their descendants - keep the existing mobile button sizing while removing the redundant per-button touch-action rule - add a regression test that inspects the mobile CSS rule covering quick-entry action controls Files changed: .changeset/quick-entry-mobile-touch.md | 5 +++++ packages/dashboard/app/components/QuickEntryBox.css | 8 ++++---- packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx | 17 +++++++++++++++++ 3 files changed, 26 insertions(+), 4 deletions(-) Fusion-Task-Id: FN-6153 Fusion-Task-Lineage: e915bb06-2c45-4d96-b719-2b7efcf6f986
This commit is contained in:
5
.changeset/quick-entry-mobile-touch.md
Normal file
5
.changeset/quick-entry-mobile-touch.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix mobile quick-entry action buttons so nested icons and labels do not trigger browser touch gestures instead of toggling their controls.
|
||||||
@@ -428,15 +428,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === Quick Entry Mobile Touch + Overflow Fixes (FN-1140) === */
|
/* === Quick Entry Mobile Touch + Overflow Fixes (FN-1140, FN-6153) === */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.quick-entry-actions {
|
.quick-entry-actions,
|
||||||
touch-action: manipulation;
|
.quick-entry-actions * {
|
||||||
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-entry-actions .btn {
|
.quick-entry-actions .btn {
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-entry-box .dep-dropdown {
|
.quick-entry-box .dep-dropdown {
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { readFileSync } from "node:fs";
|
||||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||||
import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
|
import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
|
||||||
import { QuickEntryBox } from "../QuickEntryBox";
|
import { QuickEntryBox } from "../QuickEntryBox";
|
||||||
@@ -25,6 +26,15 @@ const MOCK_MODELS = [
|
|||||||
|
|
||||||
const TEST_PROJECT_ID = "proj-123";
|
const TEST_PROJECT_ID = "proj-123";
|
||||||
const QUICK_ENTRY_STORAGE_KEY = scopedKey("kb-quick-entry-text", TEST_PROJECT_ID);
|
const QUICK_ENTRY_STORAGE_KEY = scopedKey("kb-quick-entry-text", TEST_PROJECT_ID);
|
||||||
|
const QUICK_ENTRY_BOX_CSS = readFileSync("app/components/QuickEntryBox.css", "utf8");
|
||||||
|
|
||||||
|
function quickEntryMobileActionsTouchRule() {
|
||||||
|
return (
|
||||||
|
QUICK_ENTRY_BOX_CSS.match(
|
||||||
|
/@media \(max-width: 768px\) \{[\s\S]*?(\.quick-entry-actions,\s*\.quick-entry-actions \*\s*\{[\s\S]*?\})/,
|
||||||
|
)?.[1] ?? ""
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const CREATED_TASK: Task = {
|
const CREATED_TASK: Task = {
|
||||||
id: "FN-999",
|
id: "FN-999",
|
||||||
@@ -3204,6 +3214,13 @@ describe("QuickEntryBox", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe("QuickEntryBox Mobile", () => {
|
describe("QuickEntryBox Mobile", () => {
|
||||||
|
it("keeps quick-entry action controls and descendants out of browser touch gesture handling on mobile", () => {
|
||||||
|
const touchRule = quickEntryMobileActionsTouchRule();
|
||||||
|
|
||||||
|
expect(touchRule).toMatch(/\.quick-entry-actions,\s*\.quick-entry-actions \*/);
|
||||||
|
expect(touchRule).toMatch(/touch-action:\s*none;/);
|
||||||
|
});
|
||||||
|
|
||||||
it("keeps inline deps/models controls in touch-target button classes on mobile", () => {
|
it("keeps inline deps/models controls in touch-target button classes on mobile", () => {
|
||||||
vi.spyOn(window, "innerWidth", "get").mockReturnValue(375);
|
vi.spyOn(window, "innerWidth", "get").mockReturnValue(375);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user