click outside

Author: shakyShane

special-pages/pages/history/app/global/Providers/SelectionProvider.js

@@ -130,17 +130,20 @@ export function useRowInteractions(mainRef) {
         }
     }
 
-    function handler(/** @type {MouseEvent} */ event) {
+    function clickHandler(/** @type {MouseEvent} */ event) {
         if (!(event.target instanceof Element)) return;
         if (event.target.closest('button')) return;
         if (event.target.closest('a')) return;
         const itemRow = /** @type {HTMLElement|null} */ (event.target.closest('[data-history-entry][data-index]'));
         const selection = toRowSelection(itemRow);
-        if (!itemRow || !selection) return;
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        const intention = eventToIntention(event, platformName);
-        handleClickIntentions(intention, selection);
+        if (selection) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const intention = eventToIntention(event, platformName);
+            handleClickIntentions(intention, selection);
+        } else {
+            dispatch({ kind: 'reset', reason: 'click occurred outside of rows' });
+        }
     }
 
     /**
@@ -259,7 +262,7 @@ export function useRowInteractions(mainRef) {
         if (handled) event.preventDefault();
     }
 
-    const onClick = useCallback(handler, [selected, anchorIndex, lastShiftRange, focusedIndex]);
+    const onClick = useCallback(clickHandler, [selected, anchorIndex, lastShiftRange, focusedIndex]);
     const onKeyDown = useCallback(keyHandler, [selected, anchorIndex, lastShiftRange, focusedIndex]);
 
     return { onClick, onKeyDown };

special-pages/pages/history/integration-tests/history-selections.spec.js

@@ -194,4 +194,11 @@ test.describe('history selections', () => {
         await hp.selectsRowIndexWithShift(2);
         await hp.menuForMultipleHistoryEntries(0, hp.ids(3), { action: 'delete' });
     });
+    test('clicking outside of rows de-selects everything', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
+        await hp.openPage({});
+        await hp.selectsRowIndex(0);
+        await hp.clicksOutsideOfRows();
+        await hp.selectedRowCountIs(0);
+    });
 });

special-pages/pages/history/integration-tests/history.page.js

@@ -542,4 +542,12 @@ export class HistoryTestPage {
     async submitSearchForm() {
         await this.page.getByRole('searchbox', { name: 'Search your history' }).press('Enter');
     }
+
+    async clicksOutsideOfRows() {
+        await this.page.getByRole('main').click({ position: { x: 0, y: 0 } });
+    }
+
+    async selectedRowCountIs(number) {
+        await expect(this.main().locator('[aria-selected="true"]')).toHaveCount(number);
+    }
 }