#22 Fix back navigation on mobile

Author: NoelDeMartin

cypress/e2e/tasks.cy.ts

@@ -142,4 +142,17 @@ describe('Tasks', () => {
         cy.dontSee('Cook Ramen');
     });
 
+    it('Intercepts back navigation on mobile', () => {
+        // Arrange
+        cy.viewport('samsung-s10');
+        cy.ariaLabel('Select task \\"Onboarding task\\"').click();
+        cy.wait(500); // Wait panel to open
+
+        // Act
+        cy.go('back');
+
+        // Assert
+        cy.dontSee('Created on');
+    });
+
 });

src/pages/workspace/components/WorkspaceTask.vue

@@ -229,6 +229,7 @@ import type { ElementSize } from '@aerogel/core';
 import Focus from '@/services/Focus';
 import Task from '@/models/Task';
 import Tasks from '@/services/Tasks';
+import { useWindowEvent } from '@/utils/composables';
 
 import PanelAnimator from '@/pages/workspace/animations/PanelAnimator';
 
@@ -369,6 +370,15 @@ useModelEvent(Task, 'updated', async (updatedTask) => {
     workspaceTask.value = undefined;
 });
 
+useWindowEvent('popstate', (event) => {
+    if (!event.state?.hideTask) {
+        return;
+    }
+
+    window.history.back();
+    Tasks.select(null);
+});
+
 watch(task, () => (editing.value = false));
 
 watchEffect(async () => {
@@ -377,6 +387,9 @@ watchEffect(async () => {
 
         await panelAnimator.show();
 
+        UI.mobile && window.history.pushState({ hideTask: true }, '', null);
+        UI.mobile && window.history.pushState({}, '', null);
+
         return;
     }