Move file manager focus to the selection hook

components/system/Files/FileManager/Selection/useSelection.ts

@@ -1,3 +1,4 @@
+import type { FocusEntryFunctions } from "components/system/Files/FileManager/useFocusableEntries";
 import type { Size } from "components/system/Window/RndWindow/useResizable";
 import { useMenu } from "contexts/menu";
 import type { MenuState } from "contexts/menu/useMenuContextState";
@@ -23,7 +24,9 @@ const FPS = 60;
 const DEBOUNCE_TIME = MILLISECONDS_IN_SECOND / FPS;
 
 const useSelection = (
-  containerRef: React.MutableRefObject<HTMLElement | null>
+  containerRef: React.MutableRefObject<HTMLElement | null>,
+  focusedEntries: string[],
+  { blurEntry }: FocusEntryFunctions
 ): Selection => {
   const [position, setPosition] = useState<Position>(
     () => Object.create(null) as Position
@@ -68,6 +71,7 @@ const useSelection = (
       });
 
       if (menu) setMenu(Object.create(null) as MenuState);
+      if (focusedEntries.length > 0) blurEntry();
     }
   };
   const hasMenu = Object.keys(menu).length > 0;

components/system/Files/FileManager/index.tsx

@@ -72,7 +72,7 @@ const FileManager: FC<FileManagerProps> = ({
   const [mounted, setMounted] = useState<boolean>(false);
   const fileManagerRef = useRef<HTMLOListElement | null>(null);
   const { focusedEntries, focusableEntry, ...focusFunctions } =
-    useFocusableEntries(fileManagerRef);
+    useFocusableEntries();
   const { fileActions, files, folderActions, isLoading, updateFiles } =
     useFolder(url, setRenaming, focusFunctions, {
       hideFolders,
@@ -84,7 +84,7 @@ const FileManager: FC<FileManagerProps> = ({
   const { mountFs, rootFs, stat } = useFileSystem();
   const { StyledFileEntry, StyledFileManager } = FileManagerViews[view];
   const { isSelecting, selectionRect, selectionStyling, selectionEvents } =
-    useSelection(fileManagerRef);
+    useSelection(fileManagerRef, focusedEntries, focusFunctions);
   const draggableEntry = useDraggableEntries(
     focusedEntries,
     focusFunctions,

components/system/Files/FileManager/useFocusableEntries.ts

@@ -1,11 +1,8 @@
-import { useCallback, useRef, useState } from "react";
-import { PREVENT_SCROLL } from "utils/constants";
-import { clsx, haltEvent } from "utils/functions";
+import { useCallback, useState } from "react";
+import { clsx } from "utils/functions";
 
 type FocusedEntryProps = {
   className?: string;
-  onBlurCapture: React.FocusEventHandler;
-  onFocusCapture: React.FocusEventHandler;
   onMouseDown: React.MouseEventHandler;
 };
 
@@ -21,9 +18,7 @@ type FocusableEntries = FocusEntryFunctions & {
   focusedEntries: string[];
 };
 
-const useFocusableEntries = (
-  fileManagerRef: React.MutableRefObject<HTMLOListElement | null>
-): FocusableEntries => {
+const useFocusableEntries = (): FocusableEntries => {
   const [focusedEntries, setFocusedEntries] = useState<string[]>([]);
   const blurEntry = useCallback(
     (entry?: string): void =>
@@ -46,31 +41,6 @@ const useFocusableEntries = (
       ),
     []
   );
-  const focusingRef = useRef(false);
-  const onBlurCapture: React.FocusEventHandler = useCallback(
-    (event) => {
-      const { relatedTarget, target } = event;
-      const isFileManagerFocus = fileManagerRef.current === relatedTarget;
-
-      if (isFileManagerFocus && focusingRef.current) {
-        haltEvent(event);
-        (target as HTMLElement)?.focus(PREVENT_SCROLL);
-      } else if (
-        isFileManagerFocus ||
-        !(relatedTarget instanceof HTMLElement) ||
-        !fileManagerRef.current?.contains(relatedTarget)
-      ) {
-        blurEntry();
-      }
-    },
-    [blurEntry, fileManagerRef]
-  );
-  const onFocusCapture: React.FocusEventHandler = useCallback(() => {
-    focusingRef.current = true;
-    window.requestAnimationFrame(() => {
-      focusingRef.current = false;
-    });
-  }, []);
   const focusableEntry = (file: string): FocusedEntryProps => {
     const isFocused = focusedEntries.includes(file);
     const isOnlyFocusedEntry =
@@ -92,12 +62,7 @@ const useFocusableEntries = (
       }
     };
 
-    return {
-      className,
-      onBlurCapture,
-      onFocusCapture,
-      onMouseDown,
-    };
+    return { className, onMouseDown };
   };
 
   return { blurEntry, focusEntry, focusableEntry, focusedEntries };

e2e/components/apps/FileExplorer.spec.ts

@@ -7,7 +7,6 @@ import {
   FILE_EXPLORER_STATUS_BAR_SELECTOR,
   FILE_MENU_ITEMS,
   FOLDER_MENU_ITEMS,
-  MULTI_SELECT_NOT_WORKING_BROWSERS,
   TEST_APP_ICON,
   TEST_APP_TITLE,
   TEST_APP_TITLE_TEXT,
@@ -229,7 +228,7 @@ test.describe("has file(s)", () => {
     );
   });
 
-  test("has status bar", async ({ browserName, page }) => {
+  test("has status bar", async ({ page }) => {
     await clickFileExplorerEntry(TEST_ROOT_FILE, { page });
 
     const statusBar = page.locator(FILE_EXPLORER_STATUS_BAR_SELECTOR);
@@ -243,10 +242,6 @@ test.describe("has file(s)", () => {
       await page.locator(FILE_EXPLORER_ENTRIES_FOCUSED_SELECTOR).count()
     ).toEqual(1);
 
-    if (MULTI_SELECT_NOT_WORKING_BROWSERS.has(browserName)) {
-      return;
-    }
-
     await page.keyboard.down("Control");
     await clickFileExplorerEntry(TEST_ROOT_FILE_2, { page });
 

e2e/components/system/Apps.spec.ts

@@ -1,7 +1,7 @@
 import { test } from "@playwright/test";
 import {
   DESKTOP_ENTRIES_SELECTOR,
-  FILE_DRAG_NOT_WORKING_BROWSERS,
+  DRAG_HEADLESS_NOT_SUPPORTED_BROWSERS,
   TEST_APP_CONTAINER_APP,
   TEST_APP_CONTAINER_APP_TITLE,
 } from "e2e/constants";
@@ -21,7 +21,7 @@ test.describe("app container", () => {
   test.beforeEach(windowsAreVisible);
 
   test("can drop", async ({ browserName, page }) => {
-    if (FILE_DRAG_NOT_WORKING_BROWSERS.has(browserName)) return;
+    if (DRAG_HEADLESS_NOT_SUPPORTED_BROWSERS.has(browserName)) return;
 
     await windowTitlebarTextIsVisible(TEST_APP_CONTAINER_APP, { page });
 

e2e/constants.ts

@@ -62,6 +62,7 @@ export const DIRECTORY_PICKER_NOT_SUPPORTED_BROWSERS = new Set([
   "webkit",
   "firefox",
 ]);
+export const DRAG_HEADLESS_NOT_SUPPORTED_BROWSERS = new Set(["webkit"]);
 export const WEBGL_OFFSCREEN_NOT_SUPPORTED_BROWSERS = new Set([
   "webkit", // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility
 ]);
@@ -71,14 +72,6 @@ export const WEBGL_HEADLESS_NOT_SUPPORTED_BROWSERS = new Set([
 
 export const SCREEN_CAPTURE_NOT_WORKING_BROWSERS = new Set(["webkit"]);
 
-// https://bugs.webkit.org/show_bug.cgi?id=22261
-export const FILE_DRAG_NOT_WORKING_BROWSERS = new Set([
-  "webkit", // https://github.com/DustinBrett/daedalOS/issues/280
-]);
-export const MULTI_SELECT_NOT_WORKING_BROWSERS = new Set([
-  "webkit", // https://github.com/DustinBrett/daedalOS/issues/287
-]);
-
 export const FILE_MENU_ITEMS = [
   /^Open$/,
   /^Open with$/,