Fix (UI): Extend input draggability fix to all browsers

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/useCanvasEntityListDnd.ts

@@ -4,7 +4,7 @@ import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { singleCanvasEntityDndSource } from 'features/dnd/dnd';
 import { type DndListTargetState, idle } from 'features/dnd/types';
-import { firefoxDndFix } from 'features/dnd/util';
+import { dndInputFix } from 'features/dnd/util';
 import type { RefObject } from 'react';
 import { useEffect, useState } from 'react';
 
@@ -18,7 +18,7 @@ export const useCanvasEntityListDnd = (ref: RefObject<HTMLElement>, entityIdenti
       return;
     }
     return combine(
-      firefoxDndFix(element),
+      dndInputFix(element),
       draggable({
         element,
         getInitialData() {

invokeai/frontend/web/src/features/controlLayers/components/RefImage/useRefImageDnd.ts

@@ -3,7 +3,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { singleRefImageDndSource } from 'features/dnd/dnd';
 import { type DndListTargetState, idle } from 'features/dnd/types';
-import { firefoxDndFix } from 'features/dnd/util';
+import { dndInputFix } from 'features/dnd/util';
 import type { RefObject } from 'react';
 import { useEffect, useState } from 'react';
 
@@ -17,7 +17,7 @@ export const useRefImageDnd = (ref: RefObject<HTMLElement>, id: string) => {
       return;
     }
     return combine(
-      firefoxDndFix(element),
+      dndInputFix(element),
       draggable({
         element,
         getInitialData() {

invokeai/frontend/web/src/features/dnd/DndImage.tsx

@@ -6,7 +6,7 @@ import { useMiddleClickOpenInNewTab } from 'common/hooks/useMiddleClickOpenInNew
 import { singleImageDndSource } from 'features/dnd/dnd';
 import type { DndDragPreviewSingleImageState } from 'features/dnd/DndDragPreviewSingleImage';
 import { createSingleImageDragPreview, setSingleImageDragPreview } from 'features/dnd/DndDragPreviewSingleImage';
-import { firefoxDndFix } from 'features/dnd/util';
+import { dndInputFix } from 'features/dnd/util';
 import { useImageContextMenu } from 'features/gallery/components/ContextMenu/ImageContextMenu';
 import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type { ImageDTO } from 'services/api/types';
@@ -40,7 +40,7 @@ export const DndImage = memo(
         return;
       }
       return combine(
-        firefoxDndFix(element),
+        dndInputFix(element),
         draggable({
           element,
           getInitialData: () => singleImageDndSource.getData({ imageDTO }, imageDTO.image_name),

invokeai/frontend/web/src/features/dnd/util.ts

@@ -1,7 +1,6 @@
 import type { GetOffsetFn } from '@atlaskit/pragmatic-drag-and-drop/dist/types/public-utils/element/custom-native-drag-preview/types';
 import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { noop } from 'es-toolkit/compat';
 import type { CSSProperties } from 'react';
 
 /**
@@ -47,12 +46,12 @@ export function triggerPostMoveFlash(element: HTMLElement, backgroundColor: CSSP
 }
 
 /**
- * Firefox has a bug where input or textarea elements with draggable parents do not allow selection of their text.
+ * There is a bug where input or textarea elements with draggable parents do not allow selection of their text.
  *
- * This helper function implements a workaround by setting the draggable attribute to false when the mouse is over a
+ * This helper function implements a workaround by setting the draggable attribute to false when the mouse is over an
  * input or textarea child of the draggable. It reverts the attribute on mouse out.
  *
- * The fix is only applied for Firefox, and should be used in every `pragmatic-drag-and-drop` `draggable`.
+ * The fix should be used in every `pragmatic-drag-and-drop` `draggable`.
  *
  * See:
  * - https://github.com/atlassian/pragmatic-drag-and-drop/issues/111
@@ -66,7 +65,7 @@ export function triggerPostMoveFlash(element: HTMLElement, backgroundColor: CSSP
  *     return;
  *   }
  *   return combine(
- *     firefoxDndFix(element),
+ *     dndInputFix(element),
  *     // The rest of the draggable setup is the same
  *     draggable({
  *       element,
@@ -77,11 +76,7 @@ export function triggerPostMoveFlash(element: HTMLElement, backgroundColor: CSSP
  * @param element The draggable element
  * @returns A cleanup function that removes the event listeners
  */
-export const firefoxDndFix = (element: HTMLElement): (() => void) => {
-  if (!navigator.userAgent.includes('Firefox')) {
-    return noop;
-  }
-
+export const dndInputFix = (element: HTMLElement): (() => void) => {
   const abortController = new AbortController();
 
   element.addEventListener(

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -12,7 +12,7 @@ import type { DndDragPreviewMultipleImageState } from 'features/dnd/DndDragPrevi
 import { createMultipleImageDragPreview, setMultipleImageDragPreview } from 'features/dnd/DndDragPreviewMultipleImage';
 import type { DndDragPreviewSingleImageState } from 'features/dnd/DndDragPreviewSingleImage';
 import { createSingleImageDragPreview, setSingleImageDragPreview } from 'features/dnd/DndDragPreviewSingleImage';
-import { firefoxDndFix } from 'features/dnd/util';
+import { dndInputFix } from 'features/dnd/util';
 import { useImageContextMenu } from 'features/gallery/components/ContextMenu/ImageContextMenu';
 import { GalleryItemHoverIcons } from 'features/gallery/components/ImageGrid/GalleryItemHoverIcons';
 import {
@@ -129,7 +129,7 @@ export const GalleryImage = memo(({ imageDTO }: Props) => {
     });
 
     return combine(
-      firefoxDndFix(element),
+      dndInputFix(element),
       draggable({
         element,
         getInitialData: () => {

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx

@@ -6,7 +6,7 @@ import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { firefoxDndFix } from 'features/dnd/util';
+import { dndInputFix } from 'features/dnd/util';
 import { RootContainerElementEditMode } from 'features/nodes/components/sidePanel/builder/ContainerElement';
 import { buildFormElementDndData, useBuilderDndMonitor } from 'features/nodes/components/sidePanel/builder/dnd-hooks';
 import { WorkflowBuilderEditMenu } from 'features/nodes/components/sidePanel/builder/WorkflowBuilderMenu';
@@ -86,7 +86,7 @@ const useAddFormElementDnd = (
       return;
     }
     return combine(
-      firefoxDndFix(draggableElement),
+      dndInputFix(draggableElement),
       draggable({
         element: draggableElement,
         getInitialData: () => {

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd-hooks.ts

@@ -13,7 +13,7 @@ import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHook
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { parseify } from 'common/util/serialize';
-import { firefoxDndFix, triggerPostMoveFlash } from 'features/dnd/util';
+import { dndInputFix, triggerPostMoveFlash } from 'features/dnd/util';
 import type { CenterOrEdge } from 'features/nodes/components/sidePanel/builder/center-or-closest-edge';
 import {
   attachClosestCenterOrEdge,
@@ -405,7 +405,7 @@ export const useFormElementDnd = (
     }
 
     return combine(
-      firefoxDndFix(draggableElement),
+      dndInputFix(draggableElement),
       draggable({
         element: draggableElement,
         dragHandle: dragHandleElement,
@@ -567,7 +567,7 @@ export const useNodeFieldDnd = (
       return;
     }
     return combine(
-      firefoxDndFix(draggableElement),
+      dndInputFix(draggableElement),
       draggable({
         element: draggableElement,
         dragHandle: dragHandleElement,