Fix drag and drop on touch devices (#1204)

For #1194

packages/desktop-client/package.json

@@ -41,6 +41,8 @@
     "react-app-rewired": "^2.2.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.1",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.16.1",

packages/desktop-client/src/components/FinancesApp.js

 import React, { useEffect, useMemo } from 'react';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend as Backend } from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import {
+  DndProvider,
+  HTML5DragTransition,
+  TouchTransition,
+} from 'react-dnd-multi-backend';
+import { TouchBackend } from 'react-dnd-touch-backend';
 import { connect } from 'react-redux';
 import {
   Route,
@@ -290,6 +295,23 @@ function FinancesApp(props) {
   );
 }
 
+const HTML5toTouch = {
+  backends: [
+    {
+      id: 'touch',
+      backend: TouchBackend,
+      options: { delay: 300 },
+      preview: true,
+      transition: TouchTransition,
+    },
+    {
+      id: 'html5',
+      backend: HTML5Backend,
+      transition: HTML5DragTransition,
+    },
+  ],
+};
+
 function FinancesAppWithContext(props) {
   let app = useMemo(() => <FinancesApp {...props} />, [props]);
 
@@ -300,7 +322,7 @@ function FinancesAppWithContext(props) {
           <BudgetMonthCountProvider>
             <PayeesProvider>
               <AccountsProvider>
-                <DndProvider backend={Backend}>{app}</DndProvider>
+                <DndProvider options={HTML5toTouch}>{app}</DndProvider>
               </AccountsProvider>
             </PayeesProvider>
           </BudgetMonthCountProvider>

upcoming-release-notes/1204.md

+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix drag and drop on touch devices

yarn.lock

@@ -109,6 +109,8 @@ __metadata:
     react-app-rewired: ^2.2.1
     react-dnd: ^16.0.1
     react-dnd-html5-backend: ^16.0.1
+    react-dnd-multi-backend: ^8.0.1
+    react-dnd-touch-backend: ^16.0.1
     react-dom: 18.2.0
     react-merge-refs: ^1.1.0
     react-modal: 3.16.1
@@ -7775,6 +7777,13 @@ __metadata:
   languageName: node
   linkType: hard
+"dnd-multi-backend@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "dnd-multi-backend@npm:8.0.1"
+  checksum: 674ed8c90a81ac82d0daffe75580f05e06904b5873112f91f8f5d4137a7a6a62d3477b78fb5abd5f36ad8a19e5ff4233a9d7e5f81df08ec468d5ae5ab08defc9
+  languageName: node
+  linkType: hard
+
 "dns-equal@npm:^1.0.0":
   version: 1.0.0
   resolution: "dns-equal@npm:1.0.0"
@@ -15189,6 +15198,39 @@ __metadata:
   languageName: node
   linkType: hard
+"react-dnd-multi-backend@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "react-dnd-multi-backend@npm:8.0.1"
+  dependencies:
+    dnd-multi-backend: ^8.0.1
+    react-dnd-preview: ^8.0.1
+  peerDependencies:
+    react: ^16.14.0 || ^17.0.2 || ^18.0.0
+    react-dom: ^16.14.0 || ^17.0.2 || ^18.0.0
+  checksum: 9ff966e87b383dcdba857592295071cd0177187744d0558ab79a454ac8482f360d835ad7b9c5c78603d1476a93933911bd4746ae7898347b8497cf17bb09730b
+  languageName: node
+  linkType: hard
+
+"react-dnd-preview@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "react-dnd-preview@npm:8.0.1"
+  peerDependencies:
+    react: ^16.14.0 || ^17.0.2 || ^18.0.0
+    react-dnd: ^16.0.1
+  checksum: 9a2138ff283953487fd7142382b3a2a286fdaabf5079588863214f35b6a84d32b62a6f5219592e2e21bca9718c80f22e13a89aef4b196fa35e43334328488404
+  languageName: node
+  linkType: hard
+
+"react-dnd-touch-backend@npm:^16.0.1":
+  version: 16.0.1
+  resolution: "react-dnd-touch-backend@npm:16.0.1"
+  dependencies:
+    "@react-dnd/invariant": ^4.0.1
+    dnd-core: ^16.0.1
+  checksum: 5362c5f4266e3655d02c716f341dc55c61fae53e12eb3b239245bafb7a3f3cdb953e27e187e8dcb9d86c01bc738853d764d7c85b87104a49a8a8f1ecc4d35755
+  languageName: node
+  linkType: hard
+
 "react-dnd@npm:^16.0.1":
   version: 16.0.1
   resolution: "react-dnd@npm:16.0.1"